# CSS3DREDNERER object

**URL:** <https://discourse.threejs.org/t/css3drednerer-object/36464>\
**Category:** Questions\
**Tags:** css3drenderer, blending\
**Created:** [March 28, 2022, 9:34pm UTC](https://discourse.threejs.org/t/css3drednerer-object/36464 "2022-03-28T21:34:37Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![cheenou13](https://avatars.discourse-cdn.com/v4/letter/c/cc9497/32.png) [@cheenou13](https://discourse.threejs.org/u/cheenou13)\
**Post date:** [March 28, 2022, 9:34pm UTC](https://discourse.threejs.org/t/css3drednerer-object/36464/1 "2022-03-28T21:34:37Z")

</div>

Hello all,

I am trying to put the plane mesh in front of a CSS3DObject but for some reason, the css3dobject always seems like it was in front of the plane mesh (normal 3dobject). so I tried and set the plane’s z coordinate to 5 while the css3DOject is 0, but it still seem like the css3DObject is still in front of the plane. Does anyone know a way to work around this?

the plane mesh is green and the others are either CSS3DObject or CSS3DSprite  
here is my codesandbox:

> **[CSS3DSprite -\> three.js actual (forked) - CodeSandbox](https://codesandbox.io/s/css3dsprite-three-js-actual-forked-6if3hf?file=%2Fsrc%2FsceneSetup.js)**
>
> CSS3DSprite -\> three.js actual (forked) by Cheenou13 using parcel-bundler, three

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [March 28, 2022, 10:37pm UTC](https://discourse.threejs.org/t/css3drednerer-object/36464/2 "2022-03-28T22:37:25Z")

</div>

There is no way to work around this. The CSS3D renderer is an HTML `<div>` that needs to be placed on top of the Three.js `<canvas>` to make it visible. Any depth information that is gathered during 3D rendering does not get applied to the HTML elements. There’s currently no way to extract depth data from WebGL to perform masking on `<div>`s.

If you want to place any CSS3D object “behind” a Three.js object, you simply can’t.

---

<div class="post-metadata">

**Author:** ![cheenou13](https://avatars.discourse-cdn.com/v4/letter/c/cc9497/32.png) [@cheenou13](https://discourse.threejs.org/u/cheenou13)\
**Post date:** [March 28, 2022, 11:53pm UTC](https://discourse.threejs.org/t/css3drednerer-object/36464/3 "2022-03-28T23:53:12Z")

</div>

Yea. sorry, my wording was confusing. I was not trying to place the css3D object behind a 3Djs object, I was trying to do what Jerome Etienne did in his tutorial, but I still don’t understand how he did it. I tried and made the plane’s material to have the same attributes as Jerome Etienne’s, but I couldn’t wrap my head around it.

> **[Mixing HTML pages inside your WebGL - Learning Three.js](http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/)**
>
> Wouldn’t that be cool if we were able to mix normal web pages in our webgl? To interact with them as we usually do? to view them, to click on …

---

<div class="post-metadata">

**Author:** ![UI\_UNICORN](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ui_unicorn/32/9842_2.png) [@UI\_UNICORN](https://discourse.threejs.org/u/UI_UNICORN)\
**Post date:** [March 29, 2022, 1:18am UTC](https://discourse.threejs.org/t/css3drednerer-object/36464/4 "2022-03-29T01:18:37Z")

</div>

[http://jeromeetienne.github.io/videobrowser4learningthreejs/vendor/tquery/plugins/domevent/threex.domevent.js](http://jeromeetienne.github.io/videobrowser4learningthreejs/vendor/tquery/plugins/domevent/threex.domevent.js)

raycasting and projector

---

<div class="post-metadata">

**Author:** ![awonnink](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/awonnink/32/22486_2.png) [@awonnink](https://discourse.threejs.org/u/awonnink)\
**Post date:** [March 29, 2022, 2:57pm UTC](https://discourse.threejs.org/t/css3drednerer-object/36464/5 "2022-03-29T14:57:30Z")

</div>

> [@marquizzo](#):
>
> If you want to place any CSS3D object “behind” a Three.js object, you simply can’t.

I disagree. Look for example here, where the label of the moon is a CSS3d object: [http://threeml.org/ex/label/](http://threeml.org/ex/label/)

---

<div class="post-metadata">

**Author:** ![cheenou13](https://avatars.discourse-cdn.com/v4/letter/c/cc9497/32.png) [@cheenou13](https://discourse.threejs.org/u/cheenou13)\
**Post date:** [March 29, 2022, 3:03pm UTC](https://discourse.threejs.org/t/css3drednerer-object/36464/6 "2022-03-29T15:03:22Z")

</div>

Do you know how this example was done? Or know any source that would point me to that direction?

---

<div class="post-metadata">

**Author:** ![awonnink](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/awonnink/32/22486_2.png) [@awonnink](https://discourse.threejs.org/u/awonnink)\
**Post date:** [March 29, 2022, 3:31pm UTC](https://discourse.threejs.org/t/css3drednerer-object/36464/7 "2022-03-29T15:31:24Z")

</div>

All is in the threeml.js file. The setup of the renderers is done here:

```javascript
			rendererCSS = new CSS3DRenderer();
			rendererCSS.setSize(innerWidth, innerHeight);
			container.appendChild(rendererCSS.domElement);

			// put the mainRenderer on top
			renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
			renderer.setClearColor(0x000000, 0);
			renderer.domElement.style.position = 'absolute';
			renderer.domElement.style.top = 0;
			renderer.domElement.style.zIndex = 1;
			renderer.setSize(innerWidth, innerHeight);

			rendererCSS.domElement.appendChild(renderer.domElement);

```

The CSS3D object is made like this (see function ‘handleHtmlPlaneGeometry’. ‘div’ contains the Html):

```javascript
			var holder = new THREE.Group();

			const obj = new CSS3DObject(div);

			holder.add(obj);

			//add transparant plane
			var geometry = new THREE.PlaneGeometry(1.53 * wf, 0.92 * hf);
			var material = new THREE.MeshBasicMaterial();
			material.color.set('black'); 
			material.opacity = 0;
			material.blending = THREE.NoBlending;
			material.side = THREE.DoubleSide;
			var p = new THREE.Mesh(geometry, material);

			holder.add(p);

```

Hope this helps

---

<div class="post-metadata">

**Author:** ![cheenou13](https://avatars.discourse-cdn.com/v4/letter/c/cc9497/32.png) [@cheenou13](https://discourse.threejs.org/u/cheenou13)\
**Post date:** [March 29, 2022, 3:58pm UTC](https://discourse.threejs.org/t/css3drednerer-object/36464/8 "2022-03-29T15:58:20Z")

</div>

Thanks for the breakdown of the bazillion number of codes. quick question, what is the container in this case? I saw it in the threeml.js file but I couldn’t pinpoint what it is. is the container another dom element?

UPDATE\*\*  
I got it, the container is the parent node where you want to put the two renderers. Thanks for the help @awonnink and all of the two who are suggesting the solution.