如何在threejs中为网格添加事件？

Question

我是three.js的新手，我尝试为我创建的网格创建一个点击事件：

    const geometry = new THREE.BoxBufferGeometry(size,size*0.5,size);
    const material = new THREE.MeshStandardMaterial({color:0x00aa00 });
    var option1 = new THREE.Mesh(geometry, material);
    option1.position.set( 6, 5, 1)
    // option1.callback = objectClickHandler;
    // option1.on('click', function(ev) {
    //  console.log(ev)
    // });
    console.log(option1)
    scene.add(option1)

但这是行不通的。onclick 我将隐藏并显示我导入的对象。但不能这样做，因为点击事件没有触发。帮助将不胜感激。

Answer 1

发生在three.js 中的一切都只发生在画布这个DOM 中。

要检测网格上的点击，您要做的是：

1. 在画布上添加一个单击事件侦听器。
2. 单击时检查鼠标是否在网格上。

并检查鼠标是否在网格上，您可以使用 RayCaster。

它应该是这样的：

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var targetMesh
function onMouseClick( event ) {
    raycaster.setFromCamera( mouse, camera );
    var isIntersected = raycaster.intersectObject( targetMesh );
    if (isIntersected) {
        console.log('Mesh clicked!')
    }
}
function onMouseMove( event ) {
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
window.addEventListener( 'mouseclick', onMouseClick, false );
window.addEventListener( 'mousemove', onMouseMove, false );

文档：https : //threejs.org/docs/#api/en/core/Raycaster