在 camera.position() & lookAt() 之后的 ThreeJS 相机鼠标方向答案

【问题标题】：ThreeJS Camera mouse direction after camera.position() & lookAt()在 camera.position() & lookAt() 之后的 ThreeJS 相机鼠标方向
【发布时间】：2016-06-08 22:30:37
【问题描述】：

以下代码对我来说很好用，它使用 ThreeJS ArrowHelper 将画布上的当前鼠标位置绘制为箭头。我对鼠标方向的作用在这里并不重要。

function mouseDir () {
    var bbox = canvas.getBoundingClientRect();
    var mouse3D = new THREE.Vector3 (
        ((currentMouseX - bbox.left) / bbox.width) * 2 - 1,
        -((currnetMouseY - bbox.top) / bbox.height) * 2 + 1,
        0.5
    );

    // perspective camera
    var dir = mouse3D.unproject(camera).sub(camera.position).normalize();
    scene.add(new THREE.ArrowHelper(dir, camera.position));     // draws arrow helper showing mouse direction
}

绘制的箭头指向正前方，所以我只能看到箭头的头部，这完全没问题（1.）。

只要我改变相机位置并设置外观，它就会变得很奇怪 (2.)。不再直接从鼠标处绘制箭头。以下是我如何更改位置并设置 lookAt 位置：

// DONT WORK
camera.position.set(500,50,150);
camera.lookAt(new THREE.Vector3(0,0,0));
camera.updateMatrixWorld(true);
mouseDir();
render();

只有设置相机位置才能正常工作：

// WORKS
camera.position.set(500,50,150);
camera.updateMatrixWorld(true);
mouseDir();
render();

仅设置 lookAt 位置也可以正常工作：

// WORKS
camera.lookAt(new THREE.Vector3(0,0,0));
camera.updateMatrixWorld(true);
mouseDir();
render();

我也尝试在渲染 position 和 lookAt 调用后绘制鼠标方向，但效果不佳。

我在 r74。我试图弄清楚这一天，希望有人能告诉我要搜索的方向。

【问题讨论】：

标签： camera three.js mouse direction

【解决方案1】：

dir 应该是相机位置：

var dir = camera.position;
scene.add(new THREE.ArrowHelper(dir, origin));

【讨论】：