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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

因为我们想要我们可以获得的所有颜色信息并且我们在 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 等。它们应该如下所示。

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

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

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

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

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

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