Can I use stereoCamera in an immersive-ar scene?

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:

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?

I used this example as a reference to create the stereoCamera effect

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

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:

What I’d like to have:


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
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
const orbitControls = new OrbitControls(centerCamera, renderer.domElement)

//Render Viewport 
//code below it's just sudo-code