无法让 raycaster.intersectObjects() 从远处返回相交对象答案

【问题标题】：Unable to get raycaster.intersectObjects() to return intersecting objects from a distance无法让 raycaster.intersectObjects() 从远处返回相交对象
【发布时间】：2013-12-29 22:12:10
【问题描述】：

我有一个散点图，其中有几个随机的 Sprite 对象用作数据点。我想检测鼠标指针（光标）和Sprite 对象之间的交叉点。我用来检测交叉点的设置如下：

var projector = new THREE.Projector();

window.addEventListener('mousedown', function (ev) {
    if (ev.target == renderer.domElement) {
        var vector = new THREE.Vector3((ev.clientX / window.innerWidth) * 2 - 1, -(ev.clientY / window.innerHeight) * 2 + 1, 0.5);
        var projector = new THREE.Projector();
        projector.unprojectVector(vector, camera);

        var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

        var intersects = raycaster.intersectObjects(particles);
        console.log(intersects[0]);
    }
}, false);

我遇到的问题是，当我从远处单击 Spriteobject（即单击数据点而不放大绘图）时，raycaster.intersectObjects(particles) 似乎没有返回任何内容。换句话说，intersects的长度为0。期望的行为是当点击一个数据点时（即光标下出现一个数据点），raycaster.intersectObjects()返回光标下的对象。

到目前为止，我已经创建了一个小提琴：http://jsfiddle.net/jmg157/ynFzw/

非常感谢，一如既往！

【问题讨论】：

究竟是什么问题，您的问题是什么？说它不能“正常工作”不是描述性的。
现在，我希望能够检测用户何时单击绘图上的某个点。换句话说，当鼠标指针与Sprite 对象相交时。通常会有一个图像用作点的纹理。最终目标是让用户单击一个点并能够查询有关该点的信息（即坐标、ID 等）。但是现在只检测指针何时与Sprite 对象相交会很棒。
究竟是什么问题——或症状？什么是“不工作”？
如果您单击绘图上的某个点，intersects 的长度似乎几乎总是为 0。因此鼠标指针和数据点之间的交点似乎没有正确注册。 intersects 数组应该包含与鼠标指针相交的 Sprite 对象。
设置body { margin: 0px }后症状会消失吗？还是还有问题？

标签： three.js

【解决方案1】：

当您使用Raycaster 时，您需要确保在您的 CSS 中设置

body { margin: 0 }

或类似的东西，否则，检测将被抵消。

另外，Sprites 的 Raycaster 实现需要改进。

目前，如果光线在精灵位置的一定距离内通过，就会进行检测。检测区域是一个半径为sprite.scale.x 的圆。不考虑精灵的形状。

three.js r.64

【讨论】：

希望我能给你买杯啤酒。再次感谢您的帮助。