在另一个顶部显示网格|删除重叠渲染订单| Three.js

Question

我有2个obj网格。他们俩都有一些共同的领域，但并不完全相同。

我通过将它们添加到屏幕来显示它们。就像另一个网格之上。但下部网格与顶部网格重叠但是我要实现的是，下部网格物体应始终位于下方，且不会重叠，并为整个顶部网格物体留出空间。

我经历了这个小提琴。.Fiddle with renderorder

而且我尝试了类似的方法。

var objLoader1 = new OBJLoader2();
objLoader1.load('assets/object1.obj', (root) => {
           root.renderOrder = 0;
           scene.add(root);
       });
var objLoader2 = new OBJLoader2();
objLoader2.load('assets/object2.obj', (root) => {
           root.renderOrder = 1;
           scene.add(root);
      });

但是我不知道重叠的原因是什么。.>

我尝试过...

var objLoader1 = new OBJLoader2();
objLoader1.load('assets/object1.obj', (root) => {
           objLoader1.renderOrder = 0;
           scene.add(root);
       });
var objLoader2 = new OBJLoader2();
objLoader2.load('assets/object2.obj', (root) => {
           objLoader2.renderOrder = 1;
           scene.add(root);
      });
然后我尝试通过此小提琴..Another Fiddle但是当我跑进去的时候，我只会得到下部或上部的网格。但是我想看到两者没有任何重叠。.

 var layer1 = new Layer(camera);
 composer.addPass(layer1.renderPass);
 layer1.scene.add(new THREE.AmbientLight(0xFFFFFF));
 var objLoader1 = new OBJLoader2();
 objLoader1.load('assets/object1.obj', (root) => {
        layer1.scene.add(root);
  });
  var layer2 = new Layer(camera);
  composer.addPass(layer2.renderPass);
  layer2.scene.add(new THREE.AmbientLight(0xFFFFFF));
  var objLoader2 = new OBJLoader2();
  objLoader2.load('assets/object2.obj', (root) => {
        layer2.scene.add(root);
  });
我将材料depthTest设为False但无济于事..

谁能帮助我实现我想要的..如果有人无法理解重叠的含义，请参见下图。

感谢所有花费时间和精力来帮助我的人...

我有2个obj网格。他们俩都有一些共同的领域，但并不完全相同。我通过将它们添加到屏幕上来显示它们。就像在另一个网格上一样。但是下面的网格与上面的网格重叠...

Answer 1

您正在体验z-fighting，这是指两个或多个平面在depthBuffer中占据相同的空间，因此渲染器不知道要在另一个之上渲染。单独的渲染顺序并不能解决此问题，因为无论哪个首先绘制，它们都仍在同一平面上。您可以通过几种方法解决此问题：