javascript - raycaster.intersectObjects Does Not Work: Gives the Empty Array using three.js - Stack Overflow

admin管理员组

文章数量:1320860

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.

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.

• javascript
• 3d
• three.js

Share Improve this question Follow edited Apr 26, 2015 at 7:11 Careen 56711 gold badge66 silver badges2828 bronze badges asked Apr 17, 2015 at 1:20 Darius MiliauskasDarius Miliauskas 3,52444 gold badges3838 silver badges5454 bronze badges 2

• here is my jsfiddle: jsfiddle/dariukas/zpo7qwt1 – Darius Miliauskas Commented Apr 17, 2015 at 1:27
• if it is difficult, then take a look here stackoverflow./a/28679672/4131583 – gevaraweb Commented Apr 17, 2015 at 17:23

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

As per http://threejs/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/5z13yzgx/

本文标签： javascriptraycasterintersectObjects Does Not Work Gives the Empty Array using threejsStack Overflow