三个没有摄像头的js raycaster

Question

我似乎只找到了将光线投射器与相机一起使用的示例，但没有一个只有从 A 点到 B 点的光线投射器。

我有一个工作的光线投射器，它检索我的助手、线条等，但它似乎无法识别我的球体。

我的第一个想法是我的点已经关闭，所以我决定创建一条从我的点 A 到我的点 B 的线，方向如下：

var pointA = new Vector3( 50, 0, 0 );
var direction = new Vector3( 0, 1, 0 );
direction.normalize();
var distance = 100;

var pointB = new Vector3();
pointB.addVectors ( pointA, direction.multiplyScalar( distance ) );

var geometry = new Geometry();
geometry.vertices.push( pointA );
geometry.vertices.push( pointB );
var material = new LineBasicMaterial( { color : 0xff0000 } );

var line = new Line(几何，材质);

这将显示一条从我的点 (50 0 0) 到 (50 100 0) 的线，穿过我的球体，位于点 (50, 50, 0)，因此我的 pointA 和方向值是正确的。

接下来我添加一个光线投射器： 为了避免与任何副作用发生冲突，我在这里重新创建了我的观点：

var raycaster = new Raycaster(new Vector3( 50, 0, 0 ), new Vector3( 0, 1, 0 ).normalize()); 
var intersects = raycaster.intersectObject(target);
console.log(intersects);

对我来说似乎很简单，我也尝试使用 raycaster.intersectObjects(scene.children) 但它提供了线条、助手等，但不是我的球体。

我做错了什么？我肯定在这里遗漏了一些东西。

直线和球体的IMG：

Answer 1

您看到的内容在以下 github 问题中进行了解释：

https://github.com/mrdoob/three.js/issues/11449

问题是THREE.Raycaster 发出的光线不是直接击中面而是击中顶点，导致没有相交。

有几种解决方法可以解决此问题，例如稍微移动几何体或射线。对于您的情况：

var raycaster = new THREE.Raycaster( new THREE.Vector3( 50, 0, 0 ), new THREE.Vector3( 0, 1, 0.01 ).normalize() );

但是，更好的解决方案是修复引擎并使测试更加稳健。

演示：https://jsfiddle.net/kzwmoug2/3/

three.js R106