在 three.js 中即时更改特定面孔的纹理
Changing textures for specific faces on the fly in three.js
我一直在努力完成某件事，部分原因是我什至不知道自己是否走在正确的轨道上。
任务
我正在开发一个 three.js 网络应用程序，它加载 js 模型，然后为它们分配我在 three.js 中定义的 material。手头的对象是一所房子。最终目标是以几种不同的组合在我的网格上模拟尽可能好的自然光照（包括全局光照和环境光遮蔽）。如果场景是完全静态的，我不会有问题，但我希望能够动态切换各种对象的可见性。不用说，当对象彼此分开时，这会产生粘性阴影 (AO) 问题，因为我之前已经将光照和环境光遮蔽渲染并烘焙到我的纹理中，然后将其分配给 [=58 中的分离网格内容=]，所以我的 three.js 场景中没有任何灯光，以方便客户端使用。
挑战
我已经以各种组合为我的对象预渲染了光照，因此可以使用备用纹理贴图。我试图找到一种方法来在运行时更新局部面的纹理，这样当我移除投射阴影 (AO) 的对象时，我可以告诉下面的表面显示替代的、无阴影的纹理。
我目前的做法
在阅读了无数在线资源和堆栈溢出问答后，我确定
为了即时更新纹理，我需要使用 as THREE.MeshFaceMaterial，为它提供多个备用 materials 并稍后参考它们的索引。 (Change material or color in mesh face)
我不能告诉我的网格中的一个特定面现在在运行时使用 material 作为索引 n，但我必须更改其中一个 [=68] 的纹理=]s 而不是使用该索引的所有面都将显示新纹理（这对我的问题来说不是很灵活）。
我正在尝试在 (WebGL / Three.js Different materials on one complex object (grid)) 上实施示例。
1) 我什至无法让它工作
我已经能够在运行时更改面部的颜色，但不能更改纹理。当我尝试使用 THREE.MeshFaceMaterial 并将其分配给几何体时，网格只是以随机颜色显示，但是当我直接分配其中一个 material 时，它显示正常。请参阅此处：(http://tinyurl.com/ndh99j4)。您是否有可以快速指出问题所在的调试工具？当我检查 firebug 中的 DOM 时，avalon.materials.planes_m 的结构似乎适合 THREE.FaceMeshMaterial，而且我没有收到任何错误。
2) 这甚至是完成我需要的最好方法吗？
假设我 可以 让它工作，并且我能够更新 select 面上的纹理，我最终会得到硬边，其中纹理 a和纹理 b 不适合在一起（不同的照明场景）。那么我的下一步是通过使用自定义着色器使用顶点颜色 (http://www.chandlerprall.com/2011/06/blending-webgl-textures/) 来修复这个问题吗？看起来你可以通过在顶点而不是面设置 material 来混合纹理。这两种解决方案是否可以一起使用？这是在引导我走上错误的道路吗？我对游戏开发的最佳实践知之甚少。我知道我可以在运行时模拟环境光遮蔽，但这并不能解决我对全局照明和最终聚集的需求，所以我仍然必须将照明烘焙到我的纹理中。
我一直在研究将光照分离成光照贴图 (http://threejs.org/examples/#webgl_materials_lightmap) and blending textures (http://threejs.org/examples/#webgl_materials_blending)，但这些确实解决了不同的问题。
游戏开发专家如何最好地应对这一挑战？
我建议您查看屏幕-space 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 它非常优雅和简单，我在从旧金山到纽约的航班上用时间编写了我的第一个副本小睡一下。
各方：
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}
我一直在努力完成某件事，部分原因是我什至不知道自己是否走在正确的轨道上。
任务
我正在开发一个 three.js 网络应用程序，它加载 js 模型，然后为它们分配我在 three.js 中定义的 material。手头的对象是一所房子。最终目标是以几种不同的组合在我的网格上模拟尽可能好的自然光照（包括全局光照和环境光遮蔽）。如果场景是完全静态的，我不会有问题，但我希望能够动态切换各种对象的可见性。不用说，当对象彼此分开时，这会产生粘性阴影 (AO) 问题，因为我之前已经将光照和环境光遮蔽渲染并烘焙到我的纹理中，然后将其分配给 [=58 中的分离网格内容=]，所以我的 three.js 场景中没有任何灯光，以方便客户端使用。
挑战
我已经以各种组合为我的对象预渲染了光照，因此可以使用备用纹理贴图。我试图找到一种方法来在运行时更新局部面的纹理，这样当我移除投射阴影 (AO) 的对象时，我可以告诉下面的表面显示替代的、无阴影的纹理。
我目前的做法
在阅读了无数在线资源和堆栈溢出问答后，我确定
为了即时更新纹理，我需要使用 as THREE.MeshFaceMaterial，为它提供多个备用 materials 并稍后参考它们的索引。 (Change material or color in mesh face)
我不能告诉我的网格中的一个特定面现在在运行时使用 material 作为索引 n，但我必须更改其中一个 [=68] 的纹理=]s 而不是使用该索引的所有面都将显示新纹理（这对我的问题来说不是很灵活）。
我正在尝试在 (WebGL / Three.js Different materials on one complex object (grid)) 上实施示例。
1) 我什至无法让它工作
我已经能够在运行时更改面部的颜色，但不能更改纹理。当我尝试使用 THREE.MeshFaceMaterial 并将其分配给几何体时，网格只是以随机颜色显示，但是当我直接分配其中一个 material 时，它显示正常。请参阅此处：(http://tinyurl.com/ndh99j4)。您是否有可以快速指出问题所在的调试工具？当我检查 firebug 中的 DOM 时，avalon.materials.planes_m 的结构似乎适合 THREE.FaceMeshMaterial，而且我没有收到任何错误。
2) 这甚至是完成我需要的最好方法吗？
假设我 可以 让它工作，并且我能够更新 select 面上的纹理，我最终会得到硬边，其中纹理 a和纹理 b 不适合在一起（不同的照明场景）。那么我的下一步是通过使用自定义着色器使用顶点颜色 (http://www.chandlerprall.com/2011/06/blending-webgl-textures/) 来修复这个问题吗？看起来你可以通过在顶点而不是面设置 material 来混合纹理。这两种解决方案是否可以一起使用？这是在引导我走上错误的道路吗？我对游戏开发的最佳实践知之甚少。我知道我可以在运行时模拟环境光遮蔽，但这并不能解决我对全局照明和最终聚集的需求，所以我仍然必须将照明烘焙到我的纹理中。
我一直在研究将光照分离成光照贴图 (http://threejs.org/examples/#webgl_materials_lightmap) and blending textures (http://threejs.org/examples/#webgl_materials_blending)，但这些确实解决了不同的问题。
游戏开发专家如何最好地应对这一挑战？
我建议您查看屏幕-space 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 它非常优雅和简单，我在从旧金山到纽约的航班上用时间编写了我的第一个副本小睡一下。
各方：
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}