鼠标指针在事件上的位置不在 THREE.js 上的箭头尖端居中

Question

我正在尝试确定将 THREE.js 与正交相机一起使用时屏幕上单击事件的位置。

但是，位置（以与此处类似的方式确定）并不准确。它位于鼠标指针区域，但不完全位于尖端。

通过查看在线示例，我可以看到对于透视相机，这工作正常。

此行为是否正确，还是我的代码有问题？有没有办法将确定的位置与箭头尖端对齐？

function onDocumentMouseDown(event) {
    event.preventDefault();
    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1);
    projector = new THREE.Projector();
    var ray = projector.pickingRay(vector, camera);
    pointer.position = vector.clone();
    pointer.position.z = 0;
    renderer.render(scene, camera);
}

您可以在此处查看工作示例

Answer 1

你需要

一点CSS：

body { margin: 0 }

小提琴：http://jsfiddle.net/y6yS4/4/

另请参阅此相关答案。

三.js 65