raycaster.intersectObjects Does Not Work: Gives the Empty Array using three.js
11,505
As per http://threejs.org/docs/#Reference/Core/Raycaster you forgot the line:
// update the picking ray with the camera and mouse position
raycaster.setFromCamera( mouseVector, camera );
right before you call raycaster.intersectObjects()
three.js r71
EDIT:
In three.js r54
the onDocumentMouseDown()
function should look like this:
function onDocumentMouseDown( e ) {
e.preventDefault();
var mouseVector = new THREE.Vector3(
( e.clientX / window.innerWidth ) * 2 - 1,
- ( e.clientY / window.innerHeight ) * 2 + 1,
1 );
projector.unprojectVector( mouseVector, camera );
var raycaster = new THREE.Raycaster( camera.position, mouseVector.subSelf( camera.position ).normalize() );
// create an array containing all objects in the scene with which the ray intersects
var intersects = raycaster.intersectObjects( scene.children );
console.log(intersects);
if (intersects.length>0){
console.log("Intersected object:", intersects.length);
intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
}
}
and in init() you should add:
// initialize object to perform world/screen calculations
projector = new THREE.Projector();
here is a fiddle for it: http://jsfiddle.net/5z13yzgx/
Author by
Darius Miliauskas
Updated on June 04, 2022Comments
-
Darius Miliauskas almost 2 years
It looks that "raycaster.intersectObjects" does not react (using Three.js r54). The extraction from the code (with the important parts) is the following:
var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 ); camera.position.z = 75; scene = new THREE.Scene(); document.addEventListener( 'mousedown', onDocumentMouseDown, false ); var raycaster = new THREE.Raycaster(); var mouseVector = new THREE.Vector2(); function onDocumentMouseDown( e ) { e.preventDefault(); mouseVector.x = ( e.clientX / window.innerWidth ) * 2 - 1; mouseVector.y = - ( e.clientY / window.innerHeight ) * 2 + 1; var intersects = raycaster.intersectObjects(scene.children, true); console.log(intersects); if (intersects.length>0){ intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff ); } } function render() { requestAnimationFrame(render); mesh.rotation.y += 0.005; renderer.render(scene, camera); }
I put inside the code "console.log" to debug the problem, and found that it outputs the empty array in the console. Between, I get the output of the empty array, not depending whether I clicked the certain object or just the background.
-
Darius Miliauskas about 9 yearsTypeError: undefined is not a function (evaluating 'raycaster.setFromCamera( mouseVector, camera )').
-
gaitat about 9 yearsas I said it is for r71
-
gaitat about 9 yearsdo you want this fixed in r54?
-
Darius Miliauskas about 9 yearsdeinitely, it would be helpful.
-
Careen about 9 yearsyou should still use r71 anyways... theres a big difference between the two
-
Darius Miliauskas almost 9 yearsYes, it looks I had more problems considering the versions. Since I used r69, I got the error like "function raycaster.setFromCamera was not found."
-
gaitat almost 8 yearsif this or any answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this.