CODEWITHSUNDEEP
javascriptthree.jswebgl
quoc
quoc

Reputation: 115

three.js Raycaster intersectObjects

I'm trying to modify this example from three.js to control the character(s) with mouse clicks. First, when I click on the canvas, I need the mouse coordinates and convert that into 3D space coordinates using THREE.Raycaster.intersectObjects. In the modified code, on left mouse up, I have the following: 

var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
var projector = new THREE.Projector();
projector.unprojectVector(vector, camera);

var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

var intersects = raycaster.intersectObjects(objects);

if (intersects.length > 0) {
    console.log('intersect: ' + intersects[0].point.x.toFixed(2) + ', ' + intersects[0].point.y.toFixed(2) + ', ' + intersects[0].point.z.toFixed(2) + ')');
}
else {
    console.log('no intersect');
}

I have added the ground mesh to the objects array, but raycaster.intersectObjects still returns empty array when I click on the ground mesh. I also tried passing in scene.children instead of objects, but no luck.

Here is the full modified source.

Upvotes: 3

Views: 7083

Answers (1)

quoc
quoc

Reputation: 115

Apparently, Gyroscope is the problem. Taking out these lines, and I get intersects working. Not sure if this is a bug or feature. 

var gyro = new THREE.Gyroscope();
gyro.add( camera );
characters[ Math.floor( nSkins/2 ) ].root.add( gyro );

Upvotes: 2

Related Questions