C4D -＞ Three.js资产制作与导入流程

这篇文章介绍从 Cinema 4D 中的 UV 模型到用于 Three.js 的 .glb/.gltf 资产和纹理的整个过程，该网格将依赖 MeshStandardMaterial 来复制你在 Redshift 中看到的内容， 没有由 Three.js 处理的任何照明。

推荐：用 NSDT场景设计器 快速搭建3D场景。

如果你正在寻找一种方法来导出具有可在 Three.js 中主动点亮的纹理的 .glb/.gltf 资产，请查看我关于从 Redshift 烘焙 PBR 样式贴图的另一篇文章。 因为这篇文章主要关注导出过程，所以我不会讨论如何对模型进行 UV或如何将 .glb/.gltf 导入 Three.js 并分配纹理。

本系列的后续文章将包括优化流程和资产的重要方法、此方法的缺点以及其他提示和技巧。

1、从任何UV 模型开始

你要导出的任何模型都需要有一组合适的 UV。 虽然我知道使用 Redshift 有时会使应用着色器不需要此过程，但你计划导出为 glb/gltf 的模型必须经过 UV。 这就是 C4D/Redshif 知道如何将材质/纹理烘焙到图像中，所以 Three.js 知道如何将该纹理应用于模型顶点。

记住要保持你的模型的几何体低多边形，毕竟这是一个 Three.js 场景。

2、添加 Redshift 材质并照亮场景

通过在 Redshift 中添加材质/纹理等来完成场景并照亮。请记住，最后我们将烘烤出一个单一的平面pass以应用于模型，而无需在 Three.js 中处理任何照明，因此有些东西不会转换（即凹凸/移位） 会影响烘焙的外观（即裂缝会有阴影），但你不会在模型本身上看到任何凹凸/位移。

3、检查Redshift 渲染设置并添加 AOV

当我们烘焙纹理时，我们希望在 exr 文件中使用 ACEScg 和原始颜色，这样我们就可以确保保留所有可能的颜色信息。 在“颜色管理”部分的“全局”选项卡中对 Redshift 渲染设置进行一些调整：

• 确保渲染色彩空间设置为 ACEScg，
• 将视图设置为“原始”
• 关闭“补偿视图变换”

如果打开 Redshift RenderView/IPR，你会注意到颜色看起来不对。 这是可以预料的。

你还需要在 Redshift AOV 管理器中为 Beauty pass 设置 AOV。 添加通道，然后确保选中“Direct”（可以取消选中“Multi-pass”），并在右侧的“Direct Output”部分下：

• 将格式设置为“OpenEXR”，
• 将每通道位数设置为“浮动（32 位）”
• 将压缩设置为“DWAA”。

如果需要，你可以选择导出其他 AOV，这些 AOV 也将在我们烘焙时输出到它们自己的图像文件中。 然而，由于我们只是希望将我们在 Redshift 中看到的准确结果转化为 Three.js，所以我们只需要 Beauty。

4、合并烘焙

合并使用相同UV/Texture空间的几何体，添加一个RS BakeSet，然后烘焙！

因为钳子有三个独立的几何体，但我把它们放在同一个 UV/Texture 空间，我想使用这个工作流程临时组合它们：

• 复制组。
• 关闭原始组的编辑器可见性/渲染可见性。
• 对副本执行“连接对象并删除”。 我将其重命名为 Tongs-Combined。

这将确保当我们进行烘焙时，它会将所有 tong geo 的烘焙纹理输出到一个图像文件中，而不是基于每个 几何体 的单独图像文件。 虽然你可以在 Photoshop 中单独组合这些文件，但这会使它更容易，并在纹理图像中为你提供漂亮的边缘绘画/UV 边缘扩展。

现在通过以下方式创建你的 RS BakeSet：

• 选择要烘焙的所有几何体（我的是 Tongs-Combined、GroundPlane 和 CuttingBoard）。
• 转到 Redshift 菜单 -> 工具 -> 纹理烘焙 -> 从选择创建烘焙集。

现在在大纲中选择 BakeSet 并更新宽度和高度。 我做了 2K，这可能有点矫枉过正，但你可以随时根据 Three.js 中场景的需要缩小它们。 如果设置了另一个想要烘焙的 UV 空间，你可以在 UV 源字段中指定它，尽管由于我们所有人都使用默认的 UVW，你可以将其留空。 你还可以验证要烘焙的所有对象是否都列在“对象”字段中。 如果有任何遗漏，可以将它们拖到这里。

现在你可以单击 BakeSet 上的 Bake 按钮。 它会给你一个弹出窗口，你可以在其中设置：

• 纹理的输出文件夹
• 取消选中“Default Beauty AOV”，因为我们已经在 AOV 管理器中配置了一个。

单击“烘焙”，渲染纹理需要一段时间。 你会得到类似下面的东西。

5、对纹理进行颜色校正

因为我们想要我们可以获得的所有颜色信息并且我们在 Redshift 中使用了 ACEScg 颜色空间，所以我们需要对我们的 OpenEXR 进行一些颜色转换，以便通过确保它们在 sRGB 颜色空间中，它们在 Three.js 中看起来是正确的。 我知道如何做到这一点的方法是使用 After Effects：

确保项目设置中的颜色设置使用：32 bps、sRGB，并选中“线性化工作空间”。

将你的 OpenEXR 作为合成导入 After Effects。 确保作为合成导入，但不需要联系表。

将所有 OpenEXR 放入一个合成中。 将它们每个修剪为 1 帧，并及时将它们的位置偏移 1 帧，这样就可以看到它们并使用当前时间指示器擦洗它们。

现在将一个调整层添加到此合成的顶部，并将 OpenColorIO 效果（在此处可用）添加到该层。 从 Configuration 下拉列表中，添加 Redshift 的配置文件，该文件位于 Applications/redshift/Data/OCIO 目录中，名为 config.ocio。

现在将 OpenColorIO 效果设置为“显示”模式。 将输入空间设置为“ACEScg”，并将显示设置为“sRGB”。 颜色还是不对，我们首先需要在 OpenColorIO 效果下面添加一个 Color Profile Converter 效果。 将输入配置文件设置为“sRGB”。最后，我们的颜色应该与我们在 Redshift 中设置材质和灯光时的外观完全一样！ 如果你想尽可能地编辑纹理，只需在顶部颜色转换层下方添加任何调整，以确保利用 OpenEXR 中的所有颜色信息。

接下来我们可以将时间轴（所有三个帧）渲染为 PNG 序列，并且我们将准备好在 Three.js 中使用的纹理文件。 现在，以高位深度和全分辨率 (2048) 渲染它们。 输出后，可以降低分辨率或将它们压缩为 jpg 等。它们应该如下所示。

6、将 Cinema 4D 场景导出为 glb/gltf。

切换回你的 Cinema 4D 文件，并准备好导出到 glb/gltf。 你可能希望将场景保存为“-JustGeo”之类的副本，因为我们将清除 Three.js 不需要的东西。

移除所有灯光、相机和你制作的重复几何图形以促进纹理烘焙。 大纲中唯一剩下的东西应该是空值、几何体，如果你有一些被操纵的东西，可能还有骨骼（尽管导出一个被操纵/蒙皮的对象有很多复杂的事情，所以在依赖这个工作流程进行任何动画或操纵之前做一些实验）。 也可以移除材质标签，但保留 UV 标签和 Phong 标签。

现在转到文件 -> 导出 -> glTF 并使用以下设置对其进行配置，然后将其保存。

7、将 .glb 和纹理导入 Three.js

基本上有 4 件事你需要做才能让你的场景在 Three.js 中工作

• 使用基本样板创建通用场景三样东西。画布、场景、相机、轨道控件、渲染器、浏览器窗口的调整大小事件、初始化纹理加载器和 gltf 加载器，以及添加动画循环。
• 从它们的 URI 加载三个纹理文件，将它们的每个编码更新为 THREE.sRGBEncoding，并将它们的每个 flipY 属性设置为 false。
• 创建三个 MeshBasicMaterials（每个纹理一个）并将它们的贴图属性设置为上面的纹理对象。
• 加载 gltf。 在加载过程中，遍历 gltf 并将正确的材质应用于每个几何体（Cinema 4D 导出的命名将保留，因此只需搜索具有这些名称的网格）。 并将 gltf 添加到 Three.js 场景中。

好了！3D 模型将以你在 Redshift 和 Cinema 4D 中开发的相同高质量外观在浏览器中运行。

---

原文链接：C4D->Three.js流程 — BimAnt