三个js相机移动到点

three js camera movement to point

本文关键字：移动 相机 js 三个      更新时间：2023-09-26

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

问题是：如何将相机从其位置移动到已单击对象的位置？我必须在每个轴上使用翻译方法吗？或者有更快的方法吗？

提前感谢

pp

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事件上注册侦听器
  • 将二维屏幕空间中单击的位置投影到三维场景空间中的位置
  • 从摄影机向单击方向投射一条假想线（射线）
  • 检查是否有任何对象与该线相交；第一个相交的对象是单击的对象
  • 将相机捕捉到单击的位置

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

（附言：我认为renderer.devicePixelRatio只适用于WebGL渲染器。您可以为其他渲染器删除它。）

相关文章：