【问题标题】:raycaster.intersectObjects Does Not Work: Gives the Empty Array using three.jsraycaster.intersectObjects 不起作用:使用 three.js 给出空数组
【发布时间】:2023-03-28 07:20:01
【问题描述】:

看起来“raycaster.intersectObjects”没有反应(使用 Three.js r54)。从代码中提取的(带有重要部分)如下:

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);
}

我在代码里面放了“console.log”来调试问题,发现它在控制台中输出了空数组。在这之间,我得到了空数组的输出,而不取决于我是点击了某个对象还是只点击了背景。

【问题讨论】:

标签: javascript 3d three.js


【解决方案1】:

根据http://threejs.org/docs/#Reference/Core/Raycaster,你忘记了这条线:

// update the picking ray with the camera and mouse position    
raycaster.setFromCamera( mouseVector, camera ); 

就在您致电raycaster.intersectObjects()之前

三个.js r71

编辑:

在三个.js r54 onDocumentMouseDown() 函数应如下所示:

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 );
    }
}

并在 init() 中添加:

// initialize object to perform world/screen calculations
projector = new THREE.Projector();

这是一个小提琴:http://jsfiddle.net/5z13yzgx/

【讨论】:

  • TypeError: undefined is not a function (evalating 'raycaster.setFromCamera(mouseVector, camera)')。
  • 正如我所说的 r71
  • 你想在 r54 中修复这个问题吗?
  • 绝对有帮助。
  • 无论如何你还是应该使用 r71...两者之间有很大的不同
猜你喜欢
  • 1970-01-01
  • 2015-12-29
  • 1970-01-01
  • 2014-08-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-12-30
  • 2015-08-20
相关资源
最近更新 更多