javascript - THREE.js生成UV坐标

Question

我正在使用 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

据我所知，没有自动计算 UV 的方法。

你必须自己计算一下。计算平面的 UV 非常简单，该网站解释了如何计算:calculating texture coordinates

对于复杂的形状，我不知道该怎么做。也许你可以检测平面。

编辑

这是平面(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;