javascript - 如何在 THREE.js 中获取被点击的元素

Question

假设我在 Canvas 中有一些元素，它们可能会相互覆盖。单击一个点时，如何获取该元素？

更新:这个演示有很大帮助: http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html

Answer 1

使用以下代码。这将允许您添加点击事件并在发生时执行您需要的操作。您可以查看页面的源代码以了解他们在做什么，我是从哪里获得这段代码的。

document.addEventListener( 'mousedown', onDocumentMouseDown, false );

var projector = new THREE.Projector();

function onDocumentMouseDown( event ) {

    event.preventDefault();

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

    var ray = new THREE.Ray( camera.position, 
                             vector.subSelf( camera.position ).normalize() );

    var intersects = ray.intersectObjects( objects );

    if ( intersects.length > 0 ) {

        intersects[ 0 ].object.materials[ 0 ].color.setHex( Math.random() * 0xffffff );

        var particle = new THREE.Particle( particleMaterial );
        particle.position = intersects[ 0 ].point;
        particle.scale.x = particle.scale.y = 8;
        scene.add( particle );

    }

    /*
    // Parse all the faces
    for ( var i in intersects ) {
        intersects[ i ].face.material[ 0 ].color
            .setHex( Math.random() * 0xffffff | 0x80000000 );
    }
    */
}