Hello Guys I am trying to select an object using the raycaster and I would like it to change the material of the first object that is selected. Every thing goes well until I select the object. If I pick the first element only one object changes.
If I iterate through the list most part changes but some times a part will change even when I am clicking in a blank section
My assumption is that it is with how I am loading the models or the ray caster is getting the wrong point location
I have posted the code below help help be appreciated.
var camera, scene, renderer, loader, controls, play;
var jetEngine = [];
var x = 0;
var texture = THREE.ImageUtils.loadTexture('images/metal2.jpg');
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(10, 10);
var play = false;
var container;
var $container;
var _this;
function Jet($con) {
$container = $con;
_this = this;
width = $con.width();
height = $con.height();
renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setClearColor(0xffffff, 1);
renderer.setSize(width, height);
$container.append(renderer.domElement);
raycaster = new THREE.Raycaster();
camera = new THREE.PerspectiveCamera(60, width / height, 1, 2000);
camera.position.z = 200;
camera.position.y = 0;
camera.position.x = 30;
controls = new THREE.TrackballControls(camera,renderer.domElement );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [65, 83, 68];
scene = new THREE.Scene();
loader = new THREE.JSONLoader();
loader.load("jetengine/fan.json", _this.addmodel);
loader.load("jetengine/shaft.json", _this.addmodel);
loader.load("jetengine/nose.json", _this.addmodel);
loader.load("jetengine/compressor.json", _this.addmodel);
loader.load("jetengine/compressor2.json", _this.addmodel);
loader.load("jetengine/combustion.json", _this.addmodel);
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(0, 1, 0);
scene.add(directionalLight);
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
window.addEventListener('resize', _this.onWindowResize, false);
window.addEventListener( 'click', _this.onMouseMove, false );
_this.animate();
}
Jet.prototype.changeColor = function () {
for (i = 0; i < jetEngine.length; i++) {
jetEngine[i].material = new THREE.MeshPhongMaterial({
// light
map: texture,
// dark
shininess: 50
});
}
};
Jet.prototype.playPause = function (btn) {
play = !play;
if(play){$(playbtn).html('Puase');}else{$(playbtn).html('Play');}
};
Jet.prototype.reset = function () {
play = false;
for (i = 0; i < jetEngine.length; i++) {
jetEngine[i].material = new THREE.MeshNormalMaterial()
}
camera.position.z = 200;
camera.position.y = 0;
camera.position.x = 30;
camera.lookAt(new THREE.Vector3(0,0,0));
};
Jet.prototype.addmodel = function (geometry, materials) {
var obj = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
obj.scale.set(15, 15, 15);
jetEngine[x] = obj;
scene.add(jetEngine[x]);
x++;
};
Jet.prototype.onWindowResize = function () {
width = container.width();
height = container.height();
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
controls.handleResize();
};
Jet.prototype.animate = function () {
if (play) {
if (jetEngine[0] != null) {
try{
jetEngine[0].rotateZ(1);
jetEngine[1].rotateZ(1);
jetEngine[2].rotateZ(10);
jetEngine[3].rotateZ(0);
jetEngine[4].rotateZ(1);
jetEngine[5].rotateZ(30);
}catch (err){
}
}
}
requestAnimationFrame(_this.animate);
renderer.render(scene, camera);
controls.update();
};
Jet.prototype.onMouseMove = function( e ) {
var isHovered = $container.is(":hover");
console.log(isHovered);
if (isHovered) {
mouseVector = new THREE.Vector3();
mouseVector.x = 2 * (e.clientX / width ) - 1;
mouseVector.y = 1 - 2 * ( e.clientY / height );
var vector = mouseVector.clone().unproject(camera);
var direction = new THREE.Vector3(0, 0, -1).transformDirection(camera.matrixWorld);
raycaster.set(vector, direction);
var intersects = raycaster.intersectObjects(jetEngine);
var intersection = intersects[0];
obj = intersection.object;
obj.material = new THREE.MeshPhongMaterial({
// light
map: texture,
// dark
shininess: 50
});
}
}
Update Although thanks to Almaz Vildanov for the eventControl script which was very useful. I decided to have another look through the code to identify the problem.
The problem lies in the fact that the renderer is in a nested div and the calculation for the initial co-ordinate of the ray is calculated incorrectly. To solve it replace the mousevector with this:
var mouse = { x: 0, y: 0 };
mouse.x = ((event.clientX - $container.offset().left) /$container.width() ) * 2 - 1;
mouse.y = -(((event.clientY - $container.offset().top) / $container.innerHeight() ) * 2 - 1);
console.log('x: ' + mouse.x+ '| y:'+ mouse.y);
vector.set( mouse.x, mouse.y, 0.5 );
vector.unproject( camera );
raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
where $container is the nested div where the renderer is.
Try to make through this example. Look at messages in the console.
<script src="js/controls/EventsControls.js"></script>
EventsControls = new EventsControls( camera, renderer.domElement );
EventsControls.draggable = false;
EventsControls.onclick = function() {
console.log( this.focused.name );
}
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "models/Tux.js", addModelToScene );
function addModelToScene( geometry, materials ) {
var material = new THREE.MeshFaceMaterial( materials );
model = new THREE.Mesh( geometry, material );
model.scale.set( 10, 10, 10 ); model.name = 'Tux';
model.rotation.x = -Math.PI/2;
model.position.set( 175, 45, 125 );
scene.add( model );
EventsControls.attach( model );
}
来源：https://stackoverflow.com/questions/27612407/three-js-raycaster-not-selecting-right-object