CSS3DObject is visible through webgl 3D Objects

I am using CSS3DRenderer for rendering HTML on FBX 3d objects. It’s working fine but when I rotate my scene, HTML is visible through 3D objects like transparent. I am new in Threejs. any advice or guidance would be greatly appreciated. I have recorded a video for your reference https://drive.google.com/file/d/1cwjZwuSWOylvCF_tBoI41J2eYbB0zMB7/view

   this.scene = new THREE.Scene();
   this.scene2 = new THREE.Scene();

   addRoulettable() {
       let t = this;
       return new Promise((resolve, reject) => {
         t.loader.load('../../assets/models/fbx/roulettetable.fbx',                      function (object) {
           object.traverse(function (child) {

             if (child['isMesh']) {

               child.castShadow = true;
               child.receiveShadow = false;


             if (child instanceof THREE.Mesh) {

               var texture = t.textureLoader.load('../../assets/images/leather.jpg', function (texture) {

          texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
          texture.offset.set(0, 0);
          texture.repeat.set(50, 50);


        var dashboard = t.textureLoader.load('../../assets/images/greencloth.png');

        child.material = [
          new THREE.MeshStandardMaterial({
            map: dashboard,
            blending: THREE.NoBlending,
            roughness: 2,
            side: THREE.DoubleSide,
          new THREE.MeshPhysicalMaterial({
            map: texture
          new THREE.MeshPhysicalMaterial({
            map: THREE.ImageUtils.loadTexture('../../assets/images/Gradient Diagonal (Color).jpg'),
            // blending: THREE.NoBlending,
            side: THREE.DoubleSide
          new THREE.MeshStandardMaterial({
            // map: THREE.ImageUtils.loadTexture('../../assets/images/Gradient Vertical (Color).jpg'),
            // blending: THREE.NoBlending,
            color: 'orange',
            side: THREE.DoubleSide,
            roughness: 0.4,
            metalness: 0.6,
            envMapIntensity: t.settings.envMapIntensity,
            envMap: t.reflectionCube
          new THREE.MeshStandardMaterial({
            color: 0xffffff,
            roughness: t.settings.roughness,
            metalness: t.settings.metalness,
            envMapIntensity: t.settings.envMapIntensity,
            envMap: t.reflectionCube,
            transparent: true,
            opacity: 0.6
          new THREE.MeshStandardMaterial({
            color: 0xffffff,
            roughness: 0,
            metalness: 0.7,
            envMapIntensity: t.settings.envMapIntensity,
            envMap: t.reflectionCube
          new THREE.MeshPhysicalMaterial({
            color: 0x474645

    object.position.set(0, 400, 37);

    var object3D = new THREE.Object3D;


    var positionVector = new THREE.Vector3();
    var box = new THREE.Box3().setFromObject(object);
    console.log(box.min, box.max, box.getSize(positionVector));
    var material = new THREE.MeshBasicMaterial({ wireframe: true });
    material.transparent = true;
    material.opacity = 0;
    material.blending = THREE.NoBlending;

    var geometry = new THREE.PlaneGeometry(positionVector.x * 0.85, positionVector.z * 0.53);
    var planeMesh = new THREE.Mesh(geometry, material);

    planeMesh.position.y = 680;
    planeMesh.position.z = 850;
    planeMesh.rotation.x = -90 * degree;


    t.htmlPlane = planeMesh;
    t.rouletTable = object3D;

    var dom = document.getElementById('battingUI');
    dom.style.height = positionVector.z * 0.53 + 'px';
    dom.style.width = positionVector.x * 0.85 + 'px';

    t.html = new CSS3DObject(dom);

    t.html.buffersNeedUpdate = true;
    t.html.uvsNeedUpdate = true;



  }, undefined, (err) => {

renderThings() {
       let gameContainer = document.getElementById('container');
       this.renderer2 = new CSS3DRenderer();
       this.renderer2.setSize(this.width, this.height);
       this.renderer2.domElement.style.position = 'absolute';
       this.renderer2.domElement.style.top = '0';


       this.renderer = new THREE.WebGLRenderer({ antialias: true });
       this.renderer.setClearColor(0x000000, 0);
       this.renderer.setSize(this.width, this.height);
       this.renderer.domElement.style.zIndex = 1;
       this.renderer.shadowMap.enabled = true;
       this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;


I’m afraid this is a limitation of CSS3DRenderer. HTML elements are rendered on top of your canvas. They don’t share a common depth test with the actual 3D scene rendered via WebGL.

Consider to implement the current CSS3DObjects as meshes with a PlaneBufferGeometry and appropriate (textured) materials.

Shall I use PlaneBufferGeometry instead of PlaneGeometry to resolve this issue?

You can mix CSS3D with the regular scene, but it’s a little tricky https://codepen.io/Fyrestar/pen/QOXJaJ

1 Like

I did exactly same, see my code. Can you please direct me where should i make changes in code to resolve this issue?

Checked many things but still no progress. Checked Embedding webpages in a 3D Three.js scene example, its working fine, but in my case, when i putting same webgl objects in application, css3dobjects are visible through :frowning:

1 Like