0

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

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

提前致谢

pp

4

1 回答 1

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 之类的补间库来帮助您调整转换的时间。

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

于 2013-08-20T22:44:03.853 回答