在另一个网格上显示网格 | 删除重叠 | 渲染顺序 | 三.js

Question

我有 2 个对象网格。它们都有一些共同点，但并不完全。

我通过将它们添加到屏幕来显示它们..就像一个网格叠加在另一个网格上一样。但下部网格与顶部网格重叠但我想要实现的是下部网格应始终保持在下方而不重叠并为整个顶部网格提供空间。

我经历了这个小提琴..摆弄渲染顺序

我尝试了一些类似的东西..

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);
      });

然后我尝试通过这个小提琴..另一个小提琴 但是当我运行时我只得到下部或上部网格。但我想看到两者没有任何重叠..

 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);
  });

我将材质深度测试设置为 False 但没有任何帮助..

任何人都可以帮助我实现我想要的..如果有人无法理解我所说的重叠的意思，请参见下图..

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

Answer 1

您可以使用PolygonOffset来实现您的目标，它会在写入片段之前修改深度值，以帮助将多边形移开，而无需在视觉上更改位置：

\n\n

material.polygonOffset = true;\nmaterial.polygonOffsetUnit = 1;\nmaterial.polygonOffsetFactor = 1;\n

\n\n

这是一个演示解决方案的小提琴：

\n\n

https://jsfiddle.net/5s8ey0ad/1/

\n\n

以下是OpenGL 文档中关于多边形偏移的说明：

\n\n

\n

当启用 GL_POLYGON_OFFSET_FILL、GL_POLYGON_OFFSET_LINE 或 GL_POLYGON_OFFSET_POINT 时，每个片段的深度值将在从相应顶点的深度值进行插值后进行偏移。偏移量的值为 Factor\xc3\x97DZ+r\xc3\x97units，其中 DZ 是相对于多边形屏幕区域的深度变化的度量，r 是保证产生可解析的最小值给定实现的偏移量。在执行深度测试之前以及将值写入深度缓冲区之前添加偏移量。

\n

\n