Javascript 要在网页上显示.obj文件上的单击事件吗

我在网页上有一个使用三个js的.obj文件。 我的目标是，当我向左/向右拖动鼠标时，OBJ模型应该旋转，我可以使用三个.TrackballControls（）来旋转。 下一件事是，我想触摸一下OBJ模型上的特定点，如果鼠标落在这些点上，就会发生一些事情（如网页上显示的计数器增加）。 我已经看到了三个js的DomeEvents，但它似乎允许我们单击整个对象，而不是对象上的特定点。

---

如何实现这一点？

您必须创建一个光线投射器。（r69）

---

谢谢@mcode。这个信息有帮助，但我认为如果我旋转相机，那么光线和物体之间的交点会改变，对吗？因为光线的原点已附着到摄影机。我需要的是，即使我旋转相机，对象上的一个点也应该为我提供相同的坐标，而不考虑相机的旋转。我要使用的是，如果.obj文件上有两个点（一个面向相机，一个不面向相机），我要单击面向相机的点。我应该无法单击不面对摄影机的点。我们可以用raycaster实现这一点吗？你能用油漆画草图吗？很难解释3D可视化，也很难理解。你必须将绿色画布设置为点（e.x.眼睛）坐标（x，y，z）的对象坐标，并在相机每次更改（在渲染循环或控件中）时进行更新。否。你的3D模型是一个对象。您可以将画布附加到对象的世界位置，并将偏移量附加到对象的眼睛等。

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..  
            } 
        });
    }
}