Can I use stereoCamera in an immersive-ar scene?

Questions
1

Hey guys,
I’d like to use the stereoCamera to split an immersive-ar scene (left eye - right eye).

I’ve used the example here: three.js/webgl_effects_stereo.html at 0fbae6f682f6e13dd9eb8acde02e4f50c0b73935 · mrdoob/three.js · GitHub
to do the same thing in my code but haven’t had much luck.

The reason I’d like to do that is to be able to use this device: holokit.io

Is stereoCamera not supposed to work for immersive-ar scenes or am I doing something wrong?

Or should I just go the other route which is to create 2 cameras and 2 renderers?
Thanks

2

I used this example as a reference to create the stereoCamera effect
https://threejs.org/examples/?q=view#webgl_multiple_views

You need just 1 Renderer, Two Camera(left eye, right eye) fill screen by two viewport
this way is much better than using stereoCamera Effect. you can control everything in cams

3

Hey @dongho-shin,
Thanks for the pointer, it seems like I can:

  • create 2 cameras
  • and add them to the viewport
    but somehow the cameras are giving me some trouble, it doesn’t look like I can set different positions for them.
    From what you see in the pictures I do have 2 views (as you can tell by the different backgrounds) but maybe only one camera.

The other issue is also because I’m working with AR and not VR I need the camera feed to be duplicated (left eye/ right eye), kinda like Google Cardboard in a sense.
Not sure if views would do that and also kinda surprised to not finding more example of people trying to do that.

What I have right now:

Screenshot_20230427_141146_Chrome
Screenshot_20230427_141146_Chrome1080×2400 40.2 KB

What I’d like to have:

result-left-right
result-left-right1966×2324 240 KB

Thanks

4

you mean just duplicated screen?
I understand that you want to have little position difference between left eye/ right eye

In my case I made a parent Camera(not rendered just controlled by OrbitControls) and then add a left eye camera right eye camera as a child
so
left eye(child) ---- centerCamera(parent) ---- right eye(child)
Try this

const centerCamera = new PerspectiveCamera(/**what you want to set*/)
const leftCamera = new PerspectiveCamera(/**what you want to set*/)
const rightCamera = new PerspectiveCamera(/**what you want to set*/)

centerCamera.add(leftCamera, rightCamera)
leftCamera.position.set(0,0,-10)//this set localPosition so if you want to control distance between cameras there's no problem
rightCamera.position.set(0,0,10)
const orbitControls = new OrbitControls(centerCamera, renderer.domElement)

//Render Viewport 
//...
//code below it's just sudo-code 
renderer.render(leftCamera)
renderer.render(rightCamera)