三个js相机运动指向答案

【问题标题】：three js camera movement to point三个js相机运动指向
【发布时间】：2013-08-21 06:44:03
【问题描述】：

我实际上正在使用three.js 开发一个网站。你可以在这里看到一个演示：https://c9.io/frescogusto/demi/workspace/demi_0.3.html 它在画布上，可以在 ios 和 android 上查看。

问题是：如何将相机从它的位置移动到被点击的对象的位置？我必须在每个轴上使用 translate 方法还是有更快的方法？

提前致谢

【问题讨论】：

您的问题到底是什么？
抱歉不清楚。如何将相机从其位置移动到已单击对象的位置？

标签： javascript camera three.js

【解决方案1】：

renderer.domElement.addEventListener('mousedown', function(event) {
    event.preventDefault();

    var vector = new THREE.Vector3(
        renderer.devicePixelRatio * (event.pageX - this.offsetLeft) / this.width * 2 - 1,
        - renderer.devicePixelRatio * (event.pageY - this.offsetTop) / this.height * 2 + 1,
        0.5
    );
    projector.unprojectVector(vector, camera);

    var raycaster = new THREE.Raycaster(
        camera.position,
        vector.sub( camera.position ).normalize()
    );
    var intersects = raycaster.intersectObjects(YOUR_CLICKABLE_OBJECTS);
    if (intersects.length) {
        camera.position = intersects[0].point;
        // Alternatively, camera.position = intersects[0].object.position.clone();
    }
}, false);

这段代码：

在mousedown 事件上注册一个监听器
将 2D 屏幕空间中的单击位置投影到 3D 场景空间中的位置
从相机向点击投射一条假想的线（射线）
检查是否有任何对象与该线相交；第一个相交的对象是被点击的对象
将相机捕捉到点击的位置

如果您希望将相机缓慢地转换到点击的位置而不是立即将其捕捉到那里，您可能需要查看像 TweenJS 这样的补间库来帮助您确定转换的时间。

（P.S.：我认为renderer.devicePixelRatio 仅存在于 WebGL 渲染器中。您可以将其删除以用于其他渲染器。）

【讨论】：