在 three.js 中动态更改特定面的纹理答案

【问题标题】：Changing textures for specific faces on the fly in three.js在 three.js 中动态更改特定面的纹理
【发布时间】：2015-09-01 21:47:49
【问题描述】：

我一直在努力完成某件事，部分原因是我什至不知道我是否走在正确的轨道上。

任务

我正在开发一个three.js Web 应用程序，它加载js 模型，然后为它们分配我在three.js 中定义的材料。手头的对象是房子。最终目标是在我的网格上以几种不同的组合尽可能地模拟自然光照（包括全局光照和环境光遮蔽）。如果场景完全是静态的，我不会有问题，但我希望能够动态切换各种对象的可见性。不用说，当对象彼此分开时，这会产生粘性阴影 (AO) 的问题，因为我之前已经将光照和环境光遮蔽渲染并烘焙到我的纹理中，然后分配给我在 three.js 中分离的网格内容，所以我的 three.js 场景中没有任何灯光，以方便客户端使用。

挑战

我已经以各种组合预渲染了我的对象的照明，因此有可用的替代纹理贴图。我正在尝试找到一种方法来在运行时更新局部面的纹理，以便当我移除投射阴影 (AO) 的对象时，我可以告诉下面的表面显示替代的、无阴影的纹理。

我目前的做法

在阅读了无数在线资源和堆栈溢出问题和答案后，我确定

要即时更新纹理，我需要使用 THREE.MeshFaceMaterial，为其提供多种替代材料，并稍后参考它们的索引。 (Change material or color in mesh face)
我无法告诉网格中的一个特定面现在在运行时使用索引 n 的材质，但我必须改为更改其中一种材质的纹理，所有使用该索引的面都会显示新纹理（对我的问题来说不是很灵活）。

我正在尝试在 (WebGL / Three.js Different materials on one complex object (grid)) 上实现示例。

1) 我什至无法让它工作

我已经能够在运行时更改面部的颜色，但不能更改纹理。当我尝试使用 THREE.MeshFaceMaterial 并将其分配给几何体时，网格只是以随机颜色显示，但是当我直接分配其中一种材料时，它显示正常。见这里：（http://tinyurl.com/ndh99j4）。您是否有可以快速指出问题的调试工具？当我在 firebug 中检查 DOM 时，avalon.materials.planes_m 的结构似乎适用于 THREE.FaceMeshMaterial，但我没有收到任何错误。

2) 这甚至是完成我需要的最佳方法吗？

假设我可以让它工作，并且我能够更新选定面上的纹理，我最终会得到纹理 a 和纹理 b 不适合在一起的硬边（不同的照明场景）。然后我的下一步是通过使用自定义着色器使用顶点颜色 (http://www.chandlerprall.com/2011/06/blending-webgl-textures/) 来解决这个问题吗？您似乎可以通过将材质设置在顶点而不是面来混合纹理。这两种解决方案是否完全一致？这会导致我走错路吗？我对游戏开发的最佳实践了解有限。我知道我可以在运行时模拟环境光遮蔽，但这并不能解决我对全局照明和最终聚集的需求，所以我仍然需要将光照烘焙到我的纹理中。

我一直在研究将光照分离为光照贴图 (http://threejs.org/examples/#webgl_materials_lightmap) 和混合纹理 (http://threejs.org/examples/#webgl_materials_blending)，但它们确实解决了不同的问题。

游戏开发专家如何最好地应对这一挑战？

【问题讨论】：

我正在构建一个基于 three.js 的游戏引擎，但由于对象被放置在基于浏览器的编辑器中，而不是放置在允许烘焙全局光照的 3d 软件中，因此我正在努力解决 AO 问题。你知道如何直接从 Three.js 烘焙 AO 吗？

标签： javascript three.js

【解决方案1】：

我建议您研究屏幕空间 AO 方案，而不是烘焙地图。如果几何形状发生变化，SSAO 将更加灵活。最简单的 SSAO 技术是对场景深度进行非锐化遮罩，原始论文在这里：http://www.cgmi.inf.uni-konstanz.de/publikationen/2006/unsharp_masking/Luft%20et%20al.%20--%20Image%20Enhancement%20by%20Unsharp%20Masking%20the%20Depth%20Buffer.pdf 它非常优雅和简单，我在从旧金山飞往纽约的航班上编写了我的第一个副本，有时间打盹。

【讨论】：

【解决方案2】：

所有方面：

var materialIndex;
for (var i = 0; i < 12; i ++) {
    if(i%2==0) materialIndex = new_texture_index;
    cube.geometry.faces[ i ].materialIndex = materialIndex;
}

new_texture_index 被适当替换。

因此，对于一侧，您需要拥有像 {0,1}、... {10,11} 这样的一对面孔

【讨论】：