THREE.js生成UV坐标

问题描述

我正在使用THREE.js OBJ加载器将模型导入场景。

我知道我可以很好地导入几何体，因为当我为它分配一个MeshNormalMaterial时，它显示很好。但是，如果我使用任何需要UV坐标的东西，它会给我错误：

  [.WebGLRenderingContext] GL错误：GL_INVALID_OPERATION： glDrawElements：尝试访问属性1中的范围顶点
  

我知道这是因为加载的OBJ有没有UV坐标，但我想知道是否有任何方法来生成所需的纹理坐标。我曾试过

  material.needsUpdate = true; 
 geometry.uvsNeedUpdate = true; 
 geometry.buffersNeedUpdate = true; 
  

...但无济于事。

有没有办法使用three.js自动生成UV纹理，还是必须自己指定坐标？

解决方案

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

你必须计算自己。计算一架飞机的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; 
  

I am working on importing a model into a scene using the THREE.js OBJ loader.

I know that I am able to import the geometry fine, because when I assign a MeshNormalMaterial to it, it shows up great. However, if I use anything that requires UV coordinates, It gives me the error:

[.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

I know this is because the loaded OBJ has no UV coordinates, but I was wondering if there was any way to generate the needed texture coordinates. I have tried

material.needsUpdate = true;
geometry.uvsNeedUpdate = true;
geometry.buffersNeedUpdate = true;

...but to no avail.

Is there any way to automagically generate UV textures using three.js, or do I have to assign the coordinates myself?

解决方案

To my knowledge there is no automatic way to calculate UV.

You must calculate yourself. Calculate a UV for a plane is quite easy, this site explains how: calculating texture coordinates

For a complex shape, I don't know how. Maybe you could detect planar surface.

EDIT

Here is a sample code for a planar surface (x, y, z) where 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;

这篇关于THREE.js生成UV坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！