Question

我正在尝试在ThreeJS场景中使用Raycaster来创建一种VR交互。在正常模式下一切正常，但是当我启用立体声效果时则不行。

我正在使用以下代码段。

// "camera" is a ThreeJS camera, "objectContainer" contains objects (Object3D) that I want to interact with
var raycaster = new THREE.Raycaster(),
origin = new THREE.Vector2();
origin.x = 0; origin.y = 0;

raycaster.setFromCamera(origin, camera);

var intersects = raycaster.intersectObjects(objectContainer.children, true);

if (intersects.length > 0 && intersects[0].object.visible === true) {
    // trigger some function myFunc()
}

所以基本上当我在正常模式下尝试上面的代码片段时，只要我查看任何相关的3d对象，就会触发 myFunc 。但是，只要我切换到立体声模式，它就会停止工作;即， myFunc 永远不会被触发。

我尝试将 origin.x 的值更新为-0.5。我这样做是因为在VR模式下，屏幕分为两半。然而，这也不起作用。

如何让raycaster在VR模式下与3D对象相交（打开立体声效果时）？

Answer 1

请你提供一个jsfiddle代码？

基本上，如果你在你的应用程序中使用立体声，这意味着你正在使用2个摄像头，因此你需要检查两个摄像头视图上的交叉点，这可能会成为一个昂贵的过程。

var cameras = 
    { 'camera1': new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000),
    'camera2': new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000)
    };

for (var cam in cameras) {
    raycaster.setFromCamera(origin, cameras[cam]);
    //continue your logic
}

您可以使用模拟相机交叉点的矢量对象来避免检查两次，但这取决于您要实现的目标。

Answer 2

我遇到了类似的问题，我终于找到了原因。实际上在StereoEffect中，THREE.js 显示两只眼睛上的网格，但实际上实际上只是在场景中添加了一个网格，正好在线条的中间左眼网格＆lt; - ＆gt; ;右眼网格，隐藏在观众面前。

所以当你使用raycaster时，你需要在中间的真实网格上使用它，而不是每只眼睛上显示的错觉！

我在这里详细说明了如何做到这一点 Three.js StereoEffect displays meshes across 2 eyes

希望它能解决你的问题！

Answer 3

您可以在项目中使用我的StereoEffect.js文件来解决问题。请参阅example的使用方法。另请参阅我的Raycaster stereo pull request。

threejs raycaster不能以立体模式相交

3 个答案: