首页 文章

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

提问于
浏览 次
2

我已经挣扎了一段时间才能完成某些事情，部分是因为我甚至不知道我是否在正确的轨道上 .

任务

我正在开发一个加载js模型的three.js Web应用程序，然后为它们分配我在three.js中定义的材料 . 手头的物体是房子 . 最终目标是以少数不同的组合在我的网格上尽可能地模拟自然光照（包括全局照明和环境光遮挡） . 如果场景是完全静态的，我不会有问题，但我希望能够动态切换各种对象的可见性 . 毋庸置疑，当物体彼此分开时，这会产生粘性阴影（AO）的问题，因为我之前已经将照明和环境遮挡渲染并烘焙到我的纹理中，然后将其分配给我在三个中的分段网格内容 . 所以我的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），但那些真正解决了不同的问题 .

游戏开发者如何才能最好地应对这一挑战？

javascript three.js

2 回答

  • 1

    我建议你研究一下屏幕空间的AO方案，而不是烘焙的 Map . 如果几何形状发生变化，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它非常优雅和简单，我在从旧金山飞往纽约的航班上编写了我的第一份副本 .

    回复于
  • 0

    对于所有方面：

    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}这样的面对

    回复于

相关问题