Problem, combine stereoscopic panorama with 3D Objects



For dynamic reasons i like to place a billboard like plane inside a stereoscopic panorama.
But the stereo effect breaks.

Seems like the panorams are in different focus distance than the plane.

If you hard enough try you can focus the big door at the end of the abbey.
Or focus the monk texture on the plane just in front of the door, but both together just dont fit.

The scene got a PerspectiveCamera and two spheres on layer 1 and 2 for drawn seperate on left and right eye.

I guess that this comes from mismatching focus of WebGL camera and panoramas.

What is a comfortable focus distance to look at in stereo panoramas ?
How can i achieve to match the focus of the WebGL camera ?


I’m afraid it’s not possible to achieve your desired effect. You can’t combine sprites/3D objects and a 360 panorama image in a way so both blend perfectly together. I refer in this context on the spatial perception of the entire scene.

Normally, you use sprites/billboards as markers to highlight specific places like in this example. Such markers also work in VR.

They are intended to be UI elements so it’s okay if they have an exposed position in 3D space.


Hi Mugen87,

thanks for your answere. I read your name several times in different js source code. Also you seem to be very active here in the forum. :+1:

I did a little test and rendered the panorams for the initial position once more out of my 3d application.
This time i set the focustype to none. Means that both cams for right and left eye just point straight forward.
The lines of sight are parralel and do never cross.

As u can see now
the added billbords match in 3d depth.

BUT when looking at a near object. The floor under your feets for example.
It is extremly hard to focus. Because of the near object and extreme far away focus point of the two images.

The panoram images of the other 3 position are much more comfortable to look at. (focus distance 110cm)

Something has to be wrong, or not concidered by me as i setup the camera.

I had a look at the stereocamera. The inhereted focus propertie seems to be the solve, but
i did not get it to work. I just included the stereoeffect.js
Setting up the effect and render with it should seperate a left and right offseted camera to work as stereo.

It seems to me that running on a oculus device is not the way the stereocamera was made for.
The webvr.js some kind of overwrite the stereocamera settings.

And ideas or hints where to look at the code ?


What do you mean by that? Are you referring to a setting?

BTW: Any chances to render the monastery as a real 3D object^^?


I modeled the monastery in 3ds Max and use VRay to render the panoramas.
Here u can read about the stereoscopic camera focus.|+VRayStereoscopic

Any chances to render the monastery as a real 3D object^^?

I also tried this before, but reached the maximum geometrie limit for OBJs.
Even in reduced versions, i got 80MB OBJ File.
I want to show the model with nice shadow and global illumination.
This will need multiple UWV sets on the mesh and use of shadowmaps.

Therefor i decided to use panoramas.

What about the Three.js Stereocam ? I think that should solve the Problem.
The camera for left and right eye are simply not focused at the correct distance !


Well, OBJ is actually a bad choice for the web. You can achieve with glTF much smaller results. I have recently converted an OBJ with 185 MB to glTF with approximately 40 MB. After Draco compression, the final size of the glTF asset was 5.1 MB.

I’m not sure if THREE.StereoCamera is a help in this context. When using WebVR/WebXR, the class is actually not necessary. In any event, I’m not familiar enough with this usage of panorama images to provide more help here. Maybe somebody else of the community can give more feedback.


I build a test for changing the focusdistance of the stereocamera.
The cam is located at [0,0,0] with 90°Fov.
The rotating plane 100by100 is located at [0,0,-100]

A focus distance of 100 should show the planes the center of its viewport.
Focus below 100 should move every plane to the outer border of its viewport.
Focus higher than 100 should move the planes to the inner border of its viewport.

For example look here at Fig.2

With key “a” and “d” you can lower and rise the distance.
The current focusdistance get printed in the console.

As you can see i had to set the initial focus to 1.0 instead of 100 !
Any number bove will not change a thing.
You should test from 1.0 to -1.0

Seems that the calculations for the focus are not correct !