CSS3DREDNERER object

Questions
,
1

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:

2

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.

1 Like
3

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.

4

http://jeromeetienne.github.io/videobrowser4learningthreejs/vendor/tquery/plugins/domevent/threex.domevent.js

raycasting and projector

5

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

1 Like
6

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

7

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

			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):

			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

1 Like
8

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.

1 Like