Question

我实际上在使用three.js的网站上工作。您可以在此处查看演示：https://c9.io/frescogusto/demi/workspace/demi_0.3.html 在画布上可以在ios和android上查看。

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

提前致谢

PP

Answer 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渲染器。您可以将其移除给其他渲染器。）

三个js相机运动指向

1 个答案: