如何在Three.js中为网格添加事件？

Question

如何在Three.js中为网格添加事件？

3

我刚接触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)

但是这不起作用。当我点击时，我将隐藏和显示我导入的对象。但由于单击事件未触发，因此无法执行此操作。非常感谢您的帮助。

- Atul Verma

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jay Li · Accepted Answer

在three.js中发生的一切都只在这个名为canvas的DOM中。

要检测网格上的点击事件，您需要：

在canvas上添加一个点击事件监听器。
检查鼠标是否在点击时位于网格上。

要检查鼠标是否在网格上，您需要使用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

该链接是关于Three.js库中Raycaster类的文档。