我正在使用THREE.js OBJ加载器将模型导入场景。
我知道我可以很好地导入几何图形,因为当我给它分配MeshNormalMaterial时,它显示的很好。但是,如果我使用任何需要UV坐标的东西,则会出现以下错误:
[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1
我知道这是因为加载的OBJ没有UV坐标,但是我想知道是否有任何方法可以生成所需的纹理坐标。我努力了
material.needsUpdate = true; geometry.uvsNeedUpdate = true; geometry.buffersNeedUpdate = true;
…但无济于事。
有什么方法可以使用three.js自动生成UV纹理,还是我必须自己分配坐标?
据我所知,没有自动的方法来计算紫外线。
您必须计算自己。计算平面的UV非常容易,此站点说明了如何:计算纹理坐标
对于复杂的形状,我不知道如何。也许您可以检测到平面。
编辑
这是平面的示例代码,(x, y, z)其中z = 0:
(x, y, z)
z = 0
geometry.computeBoundingBox(); var max = geometry.boundingBox.max, min = geometry.boundingBox.min; var offset = new THREE.Vector2(0 - min.x, 0 - min.y); var range = new THREE.Vector2(max.x - min.x, max.y - min.y); var faces = geometry.faces; geometry.faceVertexUvs[0] = []; for (var i = 0; i < faces.length ; i++) { var v1 = geometry.vertices[faces[i].a], v2 = geometry.vertices[faces[i].b], v3 = geometry.vertices[faces[i].c]; geometry.faceVertexUvs[0].push([ new THREE.Vector2((v1.x + offset.x)/range.x ,(v1.y + offset.y)/range.y), new THREE.Vector2((v2.x + offset.x)/range.x ,(v2.y + offset.y)/range.y), new THREE.Vector2((v3.x + offset.x)/range.x ,(v3.y + offset.y)/range.y) ]); } geometry.uvsNeedUpdate = true;