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

问题描述

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

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

我该如何解决这个问题？

解决方法

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

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

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