Question

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

Answer 1

你必须创建一个raycaster。（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..  
            } 
        });
    }
}

想要在网页上显示的.obj文件上进行点击事件

1 个答案: