# Using same scene with 2 renderers overlapping objects

**URL:** <https://discourse.threejs.org/t/using-same-scene-with-2-renderers-overlapping-objects/2975>\
**Category:** Questions\
**Tags:** css-renderer, webgl-renderer\
**Created:** [May 30, 2018, 2:12pm UTC](https://discourse.threejs.org/t/using-same-scene-with-2-renderers-overlapping-objects/2975 "2018-05-30T14:12:02Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![prabushitha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prabushitha/32/1895_2.png) [@prabushitha](https://discourse.threejs.org/u/prabushitha)\
**Post date:** [May 30, 2018, 2:12pm UTC](https://discourse.threejs.org/t/using-same-scene-with-2-renderers-overlapping-objects/2975/1 "2018-05-30T14:12:03Z")

</div>

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/](https://jsfiddle.net/ee8u21g2/1/)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 30, 2018, 3:06pm UTC](https://discourse.threejs.org/t/using-same-scene-with-2-renderers-overlapping-objects/2975/2 "2018-05-30T15:06:28Z")

</div>

Nice demo 👍.

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/](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:

```javascript
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;

```

---

<div class="post-metadata">

**Author:** ![prabushitha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prabushitha/32/1895_2.png) [@prabushitha](https://discourse.threejs.org/u/prabushitha)\
**Post date:** [May 30, 2018, 3:53pm UTC](https://discourse.threejs.org/t/using-same-scene-with-2-renderers-overlapping-objects/2975/3 "2018-05-30T15:53:54Z")

</div>

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](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/4/4de5d2a984608af6f535b7b0eab76c34e2fa1b85.jpg)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 30, 2018, 5:38pm UTC](https://discourse.threejs.org/t/using-same-scene-with-2-renderers-overlapping-objects/2975/4 "2018-05-30T17:38:14Z")

</div>

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](https://www.w3schools.com/cssref/css3_pr_transform.asp).

---

<div class="post-metadata">

**Author:** ![prabushitha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prabushitha/32/1895_2.png) [@prabushitha](https://discourse.threejs.org/u/prabushitha)\
**Post date:** [May 30, 2018, 6:19pm UTC](https://discourse.threejs.org/t/using-same-scene-with-2-renderers-overlapping-objects/2975/5 "2018-05-30T18:19:54Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [May 30, 2018, 7:27pm UTC](https://discourse.threejs.org/t/using-same-scene-with-2-renderers-overlapping-objects/2975/6 "2018-05-30T19:27:26Z")

</div>

> [@prabushitha](#):
>
> When moving the camera will the div also transform or do we have to code it manually according to the camera positions?

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.

---

<div class="post-metadata">

**Author:** ![5ervant](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/5ervant/32/4829_2.png) [@5ervant](https://discourse.threejs.org/u/5ervant)\
**Post date:** [March 31, 2019, 5:02pm UTC](https://discourse.threejs.org/t/using-same-scene-with-2-renderers-overlapping-objects/2975/7 "2019-03-31T17:02:21Z")

</div>

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](http://jeromeetienne.github.io/videobrowser4learningthreejs/) 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](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:

```auto
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](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`.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 1, 2019, 9:27am UTC](https://discourse.threejs.org/t/using-same-scene-with-2-renderers-overlapping-objects/2975/8 "2019-04-01T09:27:28Z")

</div>

> [@5ervant](#):
>
> 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](http://jeromeetienne.github.io/videobrowser4learningthreejs/) can overlap the embedded page?

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.

> [@5ervant](#):
>
> is not working with the npm packages of `three` and `three-css3drenderer` in React or Node.js:

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](http://jsfiddle.net/50y32971/3/)

---

<div class="post-metadata">

**Author:** ![5ervant](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/5ervant/32/4829_2.png) [@5ervant](https://discourse.threejs.org/u/5ervant)\
**Post date:** [April 1, 2019, 1:09pm UTC](https://discourse.threejs.org/t/using-same-scene-with-2-renderers-overlapping-objects/2975/9 "2019-04-01T13:09:21Z")

</div>

Look at my tweaked sample: [http://jsfiddle.net/an9L1c5v/](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/](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/](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?**