THREE.Mesh 的法线与原始模型不同

Posted 2023-03-16

【中文标题】THREE.Mesh 的法线与原始模型不同

【英文标题】：normals of THREE.Mesh are different than of original model

【发布时间】：2021-05-03 08:17:49

【问题描述】：

我在 3ds max 中创建了一个对象，然后将其导出为 .obj，然后使用 three.js 编辑器将其转换为 .gltf，最后进行 draco 压缩。

当我在我的 three.js 场景中加载它时，一些面似乎没有适当的照明（我使用标准材质），如果我使顶点法线可见，似乎法线平均（？）正在通过这个发生整个过程。请注意，每个感兴趣的顶点都预先有 2 条法线。

我该如何解决这个问题？

【问题讨论】：

是的，看起来您的法线确实变得平滑了。尝试识别违规顶点的坐标，然后在生成的 OBJ 文件中搜索这些值。它应该类似于v 0.0 0.0 0.0。如果整个文件中只有一个，则平滑是在导出到 OBJ 期间发生的。如果有多个，您需要找到相应的正常定义 (vn 0.0 0.0 0.0)。同样，如果这些相似顶点的法线都相同，则在导出期间发生平滑。

【参考方案1】：

WebGL 顶点每个只能有一个法线。如果你想让一个顶点有两条法线，它必须是两个独立的顶点，占据相同的位置。

通常，GLTF 导出器会为您处理这个问题，但在转换OBJ -> Three.js -> GLTF -> DRACO 的多步骤过程中，您的顶点正在合并和平均。我推荐两种选择：

尝试寻找单步 3DSMax -> DRACO 导出器，看起来像 Babylon.js has built one already，它可能会解决您的问题。 如果这不起作用，只需将硬边分成各自的独立岛，这样它们就不会共享顶点。将其保留为单个网格，只是断开连接，如下所示：这将强制您的 3D 编辑器沿硬边将顶点拆分为相同位置的两个顶点。那么您的导出过程应该可以正常工作了。