CSS3DRenderer rendering over WebGLRenderer issue

Questions
, , ,
1

I am currently trying to render CSS3D objects and WebGL objects in the same canvas, but I am currently having issues. Right now, my scene looks like the image below

image
image1876×899 183 KB

This is how I render the two

function render() {
 
  requestAnimationFrame(render);
  domRenderer.render(scene, camera);
  renderer.render(scene, camera);

}

this is how I create the renderers

// create renderers
 domRenderer = new CSS3DRenderer();
 domRenderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(domRenderer.domElement);

 renderer = new THREE.WebGLRenderer( { alpha: true } );
 renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);

What should I do to fix this issue

2

CSS3DRenderer doesn’t render 3D objects - it appends 2D HTML elements above the 3D canvas and fakes the 3D transformations using CSS transform. By default, HTML elements cannot partially occlude 3D objects.

There are workarounds though: vanilla three.js, react-three-fiber

1 Like
3

Thank you, I appreciate the help!