Using same scene with 2 renderers overlapping objects

Questions
,
1

I’ve used 2 different renderers webgl renderer to render 3d objects and css3d renderer to render a HTML content.
But the objects in webgl rendering gets covered by css3d rendering object. How to avoid this and make the rendering properly?

You can find the code in this fiddle - https://jsfiddle.net/ee8u21g2/1/

3 Likes
2

Nice demo :+1:.

What you see is a conceptual limitation of CSS3DRenderer. CSS-Elements are rendered on top of the actual canvas (the drawing surface of WebGLRenderer).

Edit: It’s actually possible to do it the other way around, see https://jsfiddle.net/kgpaue92/1/. The idea is to set the alpha paramter to true when creating WebGLRenderer. You then have to ensure via CSS, that the renderer’s domElement (it’s canvas) is on top of CSS3DRenderer.domElement. The setup looks like so:

renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = 0;
renderer.domElement.style.zIndex = '1';

renderer1 = new THREE.CSS3DRenderer();
renderer1.setSize( window.innerWidth, window.innerHeight );
renderer1.domElement.style.position = 'absolute';
renderer1.domElement.style.top = 0;
2 Likes
3

What I actually want is to load a google map into the div. Is there any solution to load dynamic google map as the floor without static texturing?
Like this
image

4

What happens when you load the map and then transform the container div via CSS3? Maybe you can produce the desired result with the CSS transform property.

1 Like
5

You mean to detach the css3d renderer from map div and use css3 transformations to rotate the map? When moving the camera will the div also transform or do we have to code it manually according to the camera positions?

6

Oh sry. If you want to use the camera, my approach is not appropriate.

I’m not sure which transformation you have to apply to your CSS3DObject in order to achieve your desired result.

7

I have the same problem.

If it’s not possible to integrate both WebGLRenderer and CSS3DRenderer results, then how does it come that the objects on this Video Browser For LearningThree.js can overlap the embedded page? Can you give me the right code structure for this?

By doing the following code on https://stackoverflow.com/a/37447854/2007055, the rendererGl is just hiding the rendererCss with rendererGl.domElement.style.position = 'absolute', even the { alpha: true } is not working with the npm packages of three and three-css3drenderer in React or Node.js:

rendererGl = new THREE.WebGLRenderer({ alpha: true });
rendererGl.setClearColor(0x000000, 0); // rendererGl.setClearColor(0x00ff00, 0.5);
rendererGl.domElement.style.position = 'absolute';
rendererGl.domElement.style.top = 0;
rendererGl.domElement.style.zIndex = '1';
parentElement.appendChild(rendererGl.domElement);

rendererCss = new THREE.CSS3DRenderer();
rendererCss.domElement.style.position = 'absolute';
rendererCss.domElement.style.top = 0;
parentElement.appendChild(rendererCss.domElement);
// ...

And the code rendererCss.domElement.appendChild(rendererGl.domElement) on https://stackoverflow.com/a/24688807/2007055 just messed my three.js code structure. rendererGl.domElement.style.position = 'absolute' is still just hiding the rendererCss with that structure, and the rendererCss result’s embedded page is not properly positioned and not responding on the OrbitControls functionality. The OrbitControls’ dom element is the parent of rendererCss.domElement.

8

My previous statement was not entirely correct/clear. Normally, CSS3DRenderer produces its render result on top of WebGLRenderer’s canvas element. However, it’s also possible to do it the other way around like demonstrated in on of your stackoverflow-links. This requires to set the alpha paramter to true when creating the WebGLRenderer.

However, both renderings are produces independently which introduces many restrictions. That’s why I said that you can’t seamlessly integrate both renderers.

What do you mean with not working? Can you please elaborate a bit what’s going wrong? The fiddle from the stackoverflow post seems to work: ThreeJSExperiment#1 - JSFiddle - Code Playground

9

Look at my tweaked sample: http://jsfiddle.net/an9L1c5v/

The renderer is just always on top of the renderer2. The skybox on that sample is just a custom made (non-standard) and rendered with renderer2. I had the same code on my previous test but with the opposite renderer order, my renderer2 is on top to see the embedded page because my renderer have a skybox, but it’s awkward 'cause the renderer result’s objects can’t overlap with the embedded page because it’s always on top of every objects, much like the same on that tweaked sample.

Now I know why the THREE.WebGLRenderer( { alpha: true } ) is still hiding my renderer2 on my previous test, because of my renderer skybox. If the renderer on http://jsfiddle.net/50y32971/3/ have a skybox, it will also fully hide the renderer2.

Now, my question is, how can I achieve this? http://jeromeetienne.github.io/videobrowser4learningthreejs/

How can I make an embedded page on my three.js scene overlappable, whether to use another scene or not, whether to use CSS3DRenderer or not?

1 Like