Three.js / 路口

Question

在我的 three.js 场景中，我有一些立方体。我想为用户提供 select 一个带有鼠标的盒子的可能性。

这是重要的代码（我使用 Three.js 版本 69。）：

function init() {
    [...]
    camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
    [...]
    // in a 'for' iteration, I a many boxes in a 'objects' array :
        abox = new THREE.Mesh( geometry, material );
        objects.push( abox );
    [...]
    vector = new THREE.Vector3(0,0,0);
    raycaster = new THREE.Raycaster();
    animate();  
    document.addEventListener( 'mousedown', onDocumentMouseDown, false     );  
}


function onDocumentMouseDown( event ) {
    event.preventDefault();
    if ( camera instanceof THREE.OrthographicCamera ) {
        vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, - 1 );
        vector.unproject( camera );
        dir.set( 0, 0, - 1 ).transformDirection( camera.matrixWorld );
        raycaster.set( vector, dir );
    } else if ( camera instanceof THREE.PerspectiveCamera ) {
        vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
        vector.unproject( camera );
        raycaster.set( camera.position, vector.sub( camera.position ).normalize() );
    }

    var intersects = raycaster.intersectObjects( objects , false);

    if ( intersects.length > 0 ) {

        var intersect = intersects[ 0 ];

        // change color of the face
        intersect.object.material.color.setHex( Math.random() * 0xFF0000 );

        renderer.render(scene, camera);

        }

    }

当我点击立方体时，点（相交）selected 并不完全（靠近，但不完全）我单击的位置。有一个移位，一个翻译（我尝试使用正交或透视相机......同样的问题）。

欢迎任何帮助。

谢谢

Answer 1

正如 WestLangley 向我建议的那样，答案是关于 canvas 的偏移量。他在这里写了一个很好的解释 THREE.js Ray Intersect fails by adding div

Three.js / 路口

Three.js / Intersection

three.js