三个没有摄像头的 js raycaster

Question

我似乎只找到了将 raycaster 与相机一起使用的示例，但是 none 只有一个从 A 点到 B 点的 raycaster。

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

我的第一个想法是我的分数不对，所以我决定从我的点 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( geometry, material );

这将显示一条从我的点 (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

三个没有摄像头的 js raycaster

Three js raycaster WITHOUT camera

three.js

raycasting