angular - CSS3D 对象在整个 3d 对象中可见，并且在旋转场景时不会保持对齐

Question

我正在使用 CSS3DRenderer 在 FBX 3d 对象上渲染 HTML。它工作正常但是当我旋转我的场景时，HTML 通过 3D 对象可见，如透明。 我是 Threejs 的新手。任何建议或指导将不胜感激。我录了视频给大家引用https://drive.google.com/file/d/1xAhznWdrEDQr7TGb4zMGWEwV9FC6j3zn/view

这是一个代码快照

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

   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;

    object3D.add(object);

    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.color.set('black')
    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.copy(object.rotation);
    planeMesh.rotation.x = -90 * degree;
    planeMesh.scale.copy(object.scale);

    object3D.add(planeMesh);

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

    t.scene.add(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.position.copy(planeMesh.position);
    t.html.rotation.copy(planeMesh.rotation);
    t.html.scale.copy(planeMesh.scale);

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

    t.scene2.add(t.html);

    resolve(true);

  }, undefined, (err) => {
    console.error(err);
    reject(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';

       gameContainer.appendChild(this.renderer2.domElement);

       this.renderer = new THREE.WebGLRenderer({ antialias: true });
       this.renderer.setPixelRatio(window.devicePixelRatio);
       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;

       gameContainer.appendChild(this.renderer.domElement);
}

Answer 1

CSS3DRenderer 对 WebGLRenderer 的深度缓冲区一无所知，因此您所看到的是意料之中的。

“在顶部”呈现的内容由您的这部分代码控制:

   this.renderer2 = new CSS3DRenderer();
   this.renderer2.domElement.style.position = 'absolute';
   this.renderer2.domElement.style.top = '0';
   gameContainer.appendChild( this.renderer2.domElement );

   this.renderer = new THREE.WebGLRenderer({ antialias: true });
   gameContainer.appendChild( this.renderer.domElement );

three.js r.108