javascript - 想要在网页上显示的 .obj 文件上有单击事件

Question

我在网页上有一个使用三个js的.obj文件。我的目标是，当我向左/向右拖动鼠标时，OBJ 模型应该旋转，我可以使用 THREE.TrackballControls() 来旋转。接下来的事情是，我想触及 OBJ 模型上的特定点，如果鼠标放在这些点上，就会发生一些事情(例如将在网页上显示的计数器增加)。我已经看到了三个 js 的 DOMevents，但看起来它允许我们单击整个对象而不是对象上的特定点。我怎样才能实现这一目标？

Answer 1

您必须创建一个光线转换器。 (r69)

mouse_vector = new THREE.Vector3(),
mouse = { x: 0, y: 0, z: 1 };
var vector = new THREE.Vector3();
var raycaster = new THREE.Raycaster();
var dir = new THREE.Vector3();

function onMouseDown( event_info ) 
{
    event_info.preventDefault();  
    mouse.x = ( event_info.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event_info.clientY / window.innerHeight ) * 2 + 1;
    mouse_vector.set( mouse.x, mouse.y, mouse.z );
    mouse_vector.unproject(camera);
    var direction = mouse_vector.sub( camera.position ).normalize();
    ray = new THREE.Raycaster( camera.position, direction );
    ray.set( camera.position, direction );
    intersects = ray.intersectObjects(scene.children, true);

    if( intersects.length ) 
    {
        intersects.forEach(function(clicked) 
        {
            // Your stuff like
            if (clicked.object.typ == 'yourObject')
            {

                //Event on click..  
            } 
        });
    }
}