针对其中的盒子几何形状进行光线投射（three.js）

Posted 2023-03-23

【中文标题】针对其中的盒子几何形状进行光线投射（three.js）

【英文标题】：Raycasting against box geometry within it (three.js)

【发布时间】：2016-07-03 18:58:56

【问题描述】：

我正在尝试检测用户正在查看框几何体的哪一面墙。想象一下，用户在一个房间里，我想检测相机当前正在看哪一面墙。我像这样从相机投射光线：

      var lookAtVector = new THREE.Vector3(0,0, -1);
      lookAtVector.applyQuaternion(camera.quaternion);

      raycaster.setFromCamera(lookAtVector, camera);
      var intersection = raycaster.intersectObject(box);
      console.log(intersection);

所以这种光线投射在“房间”外工作得很好，但如何让它在房间内工作呢？

【问题讨论】：

也许你可以反转光线

“它不起作用”不是正确的问题描述。

function raycaster.intersectObject 返回一个空数组而不是相交对象的数组。因此它没有找到并与盒子相交，尽管肯定有一个，因为相机在盒子里面。这更容易理解吗？

反转光线似乎没有帮助

我将粘贴的代码复制到带有天空盒的codepen 中，它似乎对我有用（？）

【参考方案1】：

要记住的一点是，相机始终指向负 z 方向。旋转和移动相机时，实际上是在旋转和移动整个场景。因此，我认为您的代码存在两个问题。

我认为你必须像这样初始化你的光线投射器：

var raycaster = new THREE.Raycaster(camera.position, lookAtVector);

lookAtVector 只是 var lookAtVector = new THREE.Vector3(0,0, -1);，未修改。这将从您的相机位置向其所面对的方向发送一条光线。

然后我认为也许你没有渲染你的盒子背面。构造盒子材质时，将side: THREE.BackSide（或THREE.DoubleSide）作为参数传递

编辑

我错了lookAtVector。光线可能是在相机修改场景之前投射的。因此，在 lookAtVector 上应用相机四元数时您是绝对正确的

【参考方案2】：

要在盒子几何体内部进行光线投射，您需要首先使盒子内部可见：

box.material.side = THREE.DoubleSide;

或者

box.material.side = THREE.BackSide;