1

我正在为光照贴图加载 jpeg 文件 var texture = new THREE.ImageUtils.loadTexture("textures/metal.jpg");
然后我将纹理应用于 THREE.MeshPhongMaterial

var frontMaterial = new THREE.MeshPhongMaterial( {
         color: 0xfade7e,
         specular: 0xffffff,
         ambient: 0xaa0000,
         lightMap:texture
    } )

完整的错误信息是WebGLRenderingContext: GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2

这里有什么问题吗？所有浏览器都出现错误。三.js r.56

4

2 回答 2

1

正如@alteredq 在此线程中所解释的，aLightMap需要第二组 UV。

光照贴图的重点是它们可以独立于其他纹理而存在，从而使其他纹理有机会获得更高的细节。光照贴图使用自己的一组 UV 坐标（通常由一些光照烘焙解决方案自动生成，而不是艺术家创建的主要 UV 集）。

使用与其他所有东西具有相同 UV 的光照贴图没有多大意义，因为您可以通过将光照贴图与颜色贴图一起烘焙来获得基本相同的结果，但纹理成本更低（这就是 Rage 使用的方法，它看起来很棒但是需要大量的纹理）。

光照贴图也应该是乘法的，而不是加法的。光照贴图的大用例是预烘焙阴影和环境光遮蔽，因此您需要能够使事物变暗。

因此，您的问题的答案是geometry.faceVertexUvs[0]包含通常的 UV 集；你需要添加到你的几何geometry.faceVertexUvs[1]。

三.js r.56

于 2013-02-28T16:09:38.837 回答
0

此错误成为因为 Three.js 缓冲区已过时。当您向 Mesh 添加一些纹理（地图、bumpMap ...）时，您必须重新组合缓冲区并更新 UV，如下所示：

ob is  THREE.Mesh, mt is a Material, tex is a texture.

tex.needsUpdate = true;
mt.map = tex;
ob.material = mt;
ob.geometry.buffersNeedUpdate = true;
ob.geometry.uvsNeedUpdate = true;
mt.needsUpdate = true;

这就是所有的人！

希望有帮助。

问候。

赛里斯

于 2013-11-30T18:23:31.930 回答