Three.js StereoEffect cannot be applied to CSS3DRe

Question

I'm in the process of developing a chrome VR web app. Now I'm desperately trying to figure out how to render a website into my into my stereoscopic scene which has some meshes in it.

So I have my renderer for the meshes, which works well. The following code is only the relevant snippets:

var renderer = new THREE.WebGLRenderer();

Then i have my stereoeffect renderer which receives the webgl renderer:

var effect = new THREE.StereoEffect(renderer);

Next is that I create the website renderer, and apply it to the stereoeffect:

var rendererCSS = new THREE.CSS3DRenderer();
var effectHUD = new THREE.StereoEffect(rendererCSS);

Then I have scenes which are being rendered:

var scene = new THREE.Scene();
var sceneCSS = new THREE.Scene();
function render(dt) {
      effect.render(scene, camera);
      effectHUD.render( sceneCSS, camera );
    }

No what I receive is this:

A stereoscopic image of my mesh, but a non stereoscopic image of the website. The problem is that the when I try to add the css renderer into the StereoEffect renderer, the setViewport function (among others, probably) are missing.
I've tried adding the website object to the webgl renderer, but it doesn't want to render my website, so adding the website object to the scene with the meshes doesn't work.

Any help is greatly appreciated!

Answer 1

I've been having the same problem. It appears there was a CSS Stereo renderer but it's been removed along with all examples. This could have been for any number of reasons so use the following with caution, or until they reintroduce compatibility: After searching I found a remaining copy of their demo from which you can mine the code and copy its CSS3DStereoRenderer.js file.

Hopefully this helps.