THREE.js生成UV坐标

小编典典

THREE.js生成UV坐标

javascript

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

阅读 1042

2020-05-01

共1个答案

小编典典

据我所知，没有自动的方法来计算紫外线。

您必须计算自己。计算平面的UV非常容易，此站点说明了如何：计算纹理坐标

对于复杂的形状，我不知道如何。也许您可以检测到平面。

编辑

这是平面的示例代码，(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;

2020-05-01