时间戳

首页 > 解决方案 > 在另一个之上显示网格 | 删除重叠 | 渲染订单 | 三.js

three.js - 在另一个之上显示网格 | 删除重叠 | 渲染订单 | 三.js

问题描述

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

然后我尝试通过这个 Fiddle ..另一个 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 但没有任何帮助..

谁能帮我实现我想要的..如果有人不明白我所说的重叠是什么意思，请看下图..

网格图像的重叠 - 示例

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

标签： three.jsrenderoverlapping3d-rendering

解决方案

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

material.polygonOffset = true;
material.polygonOffsetUnit = 1;
material.polygonOffsetFactor = 1;

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

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

以下是OpenGL Docs关于多边形偏移的内容：

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

推荐阅读