事件上的鼠标指针位置未以 THREE.js 上的箭头为中心答案

【问题标题】：Mouse pointer position on event not centered on arrow tip on THREE.js事件上的鼠标指针位置未以 THREE.js 上的箭头为中心
【发布时间】：2014-03-11 10:03:21
【问题描述】：

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

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

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

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

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);
}

您可以看到一个工作示例here

【问题讨论】：

标签： javascript three.js

【解决方案1】：

你需要一点 CSS：

body { margin: 0 }

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

另见related answer。

three.js r.65

【讨论】：