THREE.js生成UV坐标

Question

THREE.js生成UV坐标

我正在使用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纹理，还是我必须自己分配坐标？

Answer 1

据我所知，没有自动计算紫外线的方法。你必须自己计算。计算一个平面的紫外线非常容易，这个网站解释了如何：计算纹理坐标对于复杂的形状，我不知道如何。也许你可以探测平面。编辑以下是平面表面的示例代码，(x, y, z)其中z = 0：geometry.computeBoundingBox();var&nbsp;max&nbsp;=&nbsp;geometry.boundingBox.max, &nbsp;&nbsp;&nbsp;&nbsp;min&nbsp;=&nbsp;geometry.boundingBox.min;var&nbsp;offset&nbsp;=&nbsp;new&nbsp;THREE.Vector2(0&nbsp;-&nbsp;min.x,&nbsp;0&nbsp;-&nbsp;min.y);var&nbsp;range&nbsp;=&nbsp;new&nbsp;THREE.Vector2(max.x&nbsp;-&nbsp;min.x,&nbsp;max.y&nbsp;-&nbsp;min.y);var&nbsp;faces&nbsp;=&nbsp;geometry.faces;geometry.faceVertexUvs[0]&nbsp;=&nbsp;[];for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;faces.length&nbsp;;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;v1&nbsp;=&nbsp;geometry.vertices[faces[i].a],&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;v2&nbsp;=&nbsp;geometry.vertices[faces[i].b],&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;v3&nbsp;=&nbsp;geometry.vertices[faces[i].c]; &nbsp;&nbsp;&nbsp;&nbsp;geometry.faceVertexUvs[0].push([ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;THREE.Vector2((v1.x&nbsp;+&nbsp;offset.x)/range.x&nbsp;,(v1.y&nbsp;+&nbsp;offset.y)/range.y), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;THREE.Vector2((v2.x&nbsp;+&nbsp;offset.x)/range.x&nbsp;,(v2.y&nbsp;+&nbsp;offset.y)/range.y), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;THREE.Vector2((v3.x&nbsp;+&nbsp;offset.x)/range.x&nbsp;,(v3.y&nbsp;+&nbsp;offset.y)/range.y) &nbsp;&nbsp;&nbsp;&nbsp;]);}geometry.uvsNeedUpdate&nbsp;=&nbsp;true;

Answer 2

这里的其他答案是一个很大的帮助，但不太符合我的要求，将重复的图案纹理应用于大多数平坦表面的形状的所有边。问题是仅使用x和y分量作为u和v会导致垂直表面上出现奇怪的拉伸纹理。我在下面的解决方案使用曲面法线来选择要映射到u和v的两个分量（x，y和z）。它仍然非常粗糙，但它的效果非常好。function&nbsp;assignUVs(geometry)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;geometry.faceVertexUvs[0]&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;geometry.faces.forEach(function(face)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;components&nbsp;=&nbsp;['x',&nbsp;'y',&nbsp;'z'].sort(function(a,&nbsp;b)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;Math.abs(face.normal[a])&nbsp;>&nbsp;Math.abs(face.normal[b]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;v1&nbsp;=&nbsp;geometry.vertices[face.a]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;v2&nbsp;=&nbsp;geometry.vertices[face.b]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;v3&nbsp;=&nbsp;geometry.vertices[face.c]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;geometry.faceVertexUvs[0].push([ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;THREE.Vector2(v1[components[0]],&nbsp;v1[components[1]]), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;THREE.Vector2(v2[components[0]],&nbsp;v2[components[1]]), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;new&nbsp;THREE.Vector2(v3[components[0]],&nbsp;v3[components[1]]) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]); &nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;geometry.uvsNeedUpdate&nbsp;=&nbsp;true;}此功能不会将UV规范化为对象的大小。将相同的纹理应用于同一场景中的不同大小的对象时，这种方法效果更好。但是，根据世界坐标系的大小，您可能还需要缩放和重复纹理：texture.repeat.set(0.1,&nbsp;0.1);texture.wrapS&nbsp;=&nbsp;texture.wrapT&nbsp;=&nbsp;THREE.MirroredRepeatWrapping;

Answer 3

这里的答案很精彩，对我帮助很大。只有一件事：如果你要更新顶点，不要重新分配uvs，而是设置它们，如（范围是我的几何体）：scope.updateUVs&nbsp;=&nbsp;(copy=true)&nbsp;=>&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;scope.computeBoundingBox(); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;max&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;scope.boundingBox.max; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;min&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=&nbsp;scope.boundingBox.min; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;offset&nbsp;&nbsp;=&nbsp;new&nbsp;THREE.Vector2(0&nbsp;-&nbsp;min.x,&nbsp;0&nbsp;-&nbsp;min.y); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;range&nbsp;&nbsp;&nbsp;=&nbsp;new&nbsp;THREE.Vector2(max.x&nbsp;-&nbsp;min.x,&nbsp;max.y&nbsp;-&nbsp;min.y); &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!copy)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scope.faceVertexUvs[0]&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;faces&nbsp;=&nbsp;scope.faces; &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;scope.faces.length&nbsp;;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;v1&nbsp;=&nbsp;scope.vertices[faces[i].a]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;v2&nbsp;=&nbsp;scope.vertices[faces[i].b]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;v3&nbsp;=&nbsp;scope.vertices[faces[i].c]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;uv0&nbsp;=&nbsp;new&nbsp;THREE.Vector2(&nbsp;(&nbsp;v1.x&nbsp;+&nbsp;offset.x&nbsp;)&nbsp;/&nbsp;range.x&nbsp;,&nbsp;(&nbsp;v1.y&nbsp;+&nbsp;offset.y&nbsp;)&nbsp;/&nbsp;range.y&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;uv1&nbsp;=&nbsp;new&nbsp;THREE.Vector2(&nbsp;(&nbsp;v2.x&nbsp;+&nbsp;offset.x&nbsp;)&nbsp;/&nbsp;range.x&nbsp;,&nbsp;(&nbsp;v2.y&nbsp;+&nbsp;offset.y&nbsp;)&nbsp;/&nbsp;range.y&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;uv2&nbsp;=&nbsp;new&nbsp;THREE.Vector2(&nbsp;(&nbsp;v3.x&nbsp;+&nbsp;offset.x&nbsp;)&nbsp;/&nbsp;range.x&nbsp;,&nbsp;(&nbsp;v3.y&nbsp;+&nbsp;offset.y&nbsp;)&nbsp;/&nbsp;range.y&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(copy)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;uvs&nbsp;=scope.faceVertexUvs[0][i]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uvs[0].copy(uv0); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uvs[1].copy(uv1); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uvs[2].copy(uv2); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scope.faceVertexUvs[0].push([uv0,&nbsp;uv1,&nbsp;uv2]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;scope.uvsNeedUpdate&nbsp;=&nbsp;true;}