CODEWITHSUNDEEP
three.js
Debojyoti Ghosh
Debojyoti Ghosh

Reputation: 385

threejs raycaster cannot intersect in stereoscopic mode

I am trying to make use of Raycaster in a ThreeJS scene to create a sort of VR interaction. Everything works fine in normal mode, but not when I enable stereo effect.

I am using the following snippet of code.

// "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()
}

So basically when I try the above snippet of code in normal mode, myFunc gets triggered whenever I am looking at any of the concerned 3d objects. However as soon as I switch to stereo mode, it stops working; i.e., myFunc never gets triggered.

I tried updating the value of origin.x to -0.5. I did that because in VR mode, the screen gets split into two halves. However that didn't work either.

What should I do to make the raycaster intersect the 3D objects in VR mode (when stereo effect is turned on)?

Upvotes: 0

Views: 295

Answers (3)

Andrej
Andrej

Reputation: 707

You can use my StereoEffect.js file in your project for resolving problem. See example of using. See my Raycaster stereo pull request also.

Upvotes: 0

Manu
Manu

Reputation: 36

I encountered a similar problem, I eventually found the reason. Actually in StereoEffect THREE.js displays the meshes on the two eyes, but in reality is actually adds only one mesh to the scene, exactly in the middle of the line left-eye-mesh <-> right-eye-mesh, hidden to the viewer.

So when you use the raycaster, you need to use it on the real mesh on the middle, not the illusion displayed on each eye !

I detailled here how to do it Three.js StereoEffect displays meshes across 2 eyes

Hopes it solves your problem !

Upvotes: 0

INF1
INF1

Reputation: 623

Could you please provide a jsfiddle with the code?

Basically, if you are using stereo in your app, it means you are using 2 cameras, therefore you need to check your intersects on both cameras views, this could become an expensive process.

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
}

You could use a vector object that simulates the camera intersection to avoid checking twice, but this depends on what you are trying to achieve.

Upvotes: 1

Related Questions