javascript - Three.js 中 BufferGeometry 的渲染顺序

Question

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

此外，我还阅读了这个 thread , 在 JSFiddle 上做了一个实验并意识到 BufferGeometry 中面的渲染顺序与它们在缓冲区中指定的顺序相同，但与相机的距离不同。 (在上面的实验中，我在缓冲区中先指定了一个更近的三 Angular 形，它遮挡了后面的其他三 Angular 形。)

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

谢谢。

Answer 1

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

如果您必须动态改变场景元素的透明度，我建议您维护单独的几何体，每个几何体都与自己的 Material 配对。

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

如果您对透明 Material 使用以下设置，您可能会发现伪影更少:

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

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

three.js r.75