Three.js 中 BufferGeometry 的渲染顺序

Posted 2023-02-27

【中文标题】Three.js 中 BufferGeometry 的渲染顺序

【英文标题】：Render Order of BufferGeometry in Thee.js

【发布时间】：2016-08-08 21:34:37

【问题描述】：

在previous question 之后，我正在处理在BufferGeometry 中构建模型，并意识到transparent 标志会影响渲染顺序：具有透明材质的对象将在非透明材质之后渲染。

另外，我从这个thread 中读到，在JSFiddle 上做了一个实验，发现 BufferGeometry 中面部的渲染顺序与缓冲区中指定的顺序相同，但与相机的距离不同。 （在上面的实验中，我首先在缓冲区中指定了一个更近的三角形，它会遮挡它后面的其他三角形。）

所以我的问题是：是否可以在 BufferGeometry 中手动设置人脸的渲染顺序？ 就我而言，我可能需要动态更改建筑元素的透明度。 （我读过thread 说我们可以设置Object3D 的renderOrder。）

谢谢。

【参考方案1】：

人脸按照它们在BufferGeometry中出现的顺序呈现。

如果您必须动态改变场景元素的透明度，我建议您保留单独的几何图形，每个几何图形都与自己的材质配对。

渲染器将首先渲染具有transparent = false 的对象。然后它将渲染具有transparent = true 的对象。

如果您对透明材质使用以下设置，您可能会发现工件较少：

material.transparent = true;
material.opacity = 0.5; // or as desired
material.depthTest = true; // the default
material.depthWrite = false; // use for transparent materials only

此外，自我透明特别棘手。一个例子是半透明的立方体（或建筑物）。在这种情况下减少伪影的一种方法是两次渲染对象：首先使用material.side = THREE.BackSide，然后再次使用material.side = THREE.FrontSide。您可以使用object.renderOrder 来强制对象之间的特定渲染顺序。

three.js r.75