Threejs中3D對象的“onClick”事件？

Question

Threejs中的對象是否有一個簡單的onClick事件？ 我無法找到任何過時的幫助。

Answer 1

您可以使用THREE.Raycaster檢查 onclick 事件，

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function onMouseDown( event ) {

    // calculate mouse position in normalized device coordinates
    // (-1 to +1) for both components

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

}

function render() {

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

    // calculate objects intersecting the picking ray
    const intersects = raycaster.intersectObjects( scene.children );

    for ( let i = 0; i < intersects.length; i ++ ) {

        intersects[ i ].object.material.color.set( 0xff0000 ); //Sets the object selected to red

    }

    renderer.render( scene, camera );

}

window.addEventListener( 'mousedown', onMouseDown, false );

window.requestAnimationFrame(render);