Question

我正在为光照贴图加载一个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

这里有什么不对吗？所有浏览器都会出错。 Three.js r.56

Answer 1

正如this帖子中@alteredq所解释的那样，LightMap需要第二组UV。

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

使用与其他所有内容相同的UV的光照贴图没有多大意义，因为只需将光照贴图与彩色贴图一起烘焙，就可以获得基本相同的结果，从而降低纹理成本（例如，这是Rage使用的，它看起来很棒，但需要大量的纹理。）

此外，光照贴图应该是乘法的，而不是附加的。光照贴图的大用途是预烘烤阴影和环境遮挡，因此您需要能够使颜色变暗。

所以问题的答案是geometry.faceVertexUvs[0]包含通常的一组UV;您需要添加到几何体geometry.faceVertexUvs[1]。

three.js r.56

Answer 2

此错误的原因是Three.js缓冲区已过时。当您向网格添加一些纹理（map，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;

这就是所有人！

希望它有所帮助。

问候。

Sayris

Three.js lightMap导致错误WebGLRenderingContext：GL错误：GL_INVALID_OPERATION

2 个答案: