不透明对象上的 Three.js 透明度伪影答案

【问题标题】：Three.js transparency artefact on not transparent object不透明对象上的 Three.js 透明度伪影
【发布时间】：2020-04-08 13:33:28
【问题描述】：

你好，我对three.js 有疑问。我在我的场景中导入了一个不透明的“大”glb 模型，但如果模型在相机视图中被自身覆盖，则前景变得透明。（如图所示，背景山在前景）

我尝试了一些解决方案，例如：

但是没有任何效果。如果有人有解决方案:)

谢谢！

【问题讨论】：

【解决方案1】：

无法完全正确地渲染透明对象。您首先需要渲染任何不透明的对象，然后从后到前渲染透明表面，以便任何新的表面混合在它背后的东西之上。在许多情况下，这是无法做到的，尤其是在渲染可能会重叠的透明对象时。

解决此问题需要将有问题的对象（甚至是单个三角形）切割成更小的部分，以便保留顺序，而这通常几乎是不可能的。由于您正在使用 Three.js，请查看是否可以更改您的设计，以使这不是问题，或者不正确的渲染顺序造成的伪影不会太明显。

【讨论】：

上述限制适用于所有正常的 3d 渲染，而不仅仅是 WebGL 或 Three.js。您可以通过使用光线追踪器完全避免它们，但这会慢得多，并且需要完全不同的实现。
在您的特定问题中，您能否在启用深度测试的情况下渲染不透明的地形，然后渲染透明的水？我不太记得 Three.js 是如何处理这个问题的，但原则上它应该能够首先渲染非透明对象。
感谢您的快速回复。但是在我的情况下，地形根本不透明......而且我认为问题不来自水，因为如果我移除水，问题仍然存在:(我将尝试在水中启用深度测试。
可以分享一下glb模型吗？
你可以在这里下载我的glb文件：1fichier.com/?z6hwqimlej12yw3uzaxv

【解决方案2】：

感谢 donmccurdy 在 three.js 论坛上找到了我的解决方案。

最后我的 glb 文件是透明的 :( 所以有两种解决方案。

解决方案 1：

找出模型是如何透明的并修复它。

解决方案 2：

将其改回不透明，并恢复默认的 depthWrite 值。

mesh = content.getObjectByName('mesh_0');
mesh.material.transparent = false;
mesh.material.depthWrite = true;

【讨论】：