Question

定义BufferGeometry的UV映射时发生的奇怪行为：

我知道对于索引BufferGeometry，我不需要重复顶点并且可以重复使用它们-因此，对于10x10池的矩阵，我将200个三角形与2种不同的纹理材质连接起来。

当我要应用UV贴图时，问题开始了：

var gg=new THREE.BufferGeometry(),vtx=[],uv=[],fc=[[],[]],mm=[
    material1,
    material2
];
for(var y=0 ; y<11 ; y++)
    for(var x=0 ; x<11 ; x++) {
        vtx.push(x-5,0,y-5);
        if(x&&y) {
            var p=(vtx.length/3)-1;
            fc[(x%2)^(y%2)].push(
            // Incides
            //    A    B     C
                p,   p-11, p-1,
                p-1, p-11, p-12
            );
            uv.push(
            // UV mapping (suppose per triangle??!)
            //    A    B    C
                1,0, 1,1, 0,1,
                0,1, 1,1, 0,0
            );
        }
    }
Array.prototype.push.apply(fc[0],fc[1]); gg.setIndex(fc[0]);
gg.addAttribute('position',new THREE.Float32BufferAttribute(vtx,3));
gg.addAttribute('uv',new THREE.Float32BufferAttribute(uv,2));
gg.computeVertexNormals();
gg.addGroup(0,300,0);
gg.addGroup(300,300,1);
scene.add(new THREE.Mesh(gg,mm));

此处存在测试链接：https://www.crazygao.com/vc/tst3.htm

据我了解，即使在索引THREE.BufferGeometry中，UV也附加到VERTEX而不是INCIDES上，对吗？如果是这样，如何实现每个三角形（面）的UV贴图？而且我更喜欢不创建THREE.Geometry然后转换为THREE.BufferGeometry，并尝试避免添加“额外的顶点”，因为这不是索引BufferGeometry的意图。对于此类网格，为顶点设置恒定的UV可能是一个大问题。

我正在使用THREEjs v.101

Answer 1

我认为，如果要按面映射，则可能还必须复制顶点。基本上，所有功能都是独特的顶点+法线+紫外线组合。否则，您将需要多个索引缓冲区，一个用于版本，一个用于法线，一个用于uvs。我倾向于不太担心顶点数据的数量。真正影响性能的是绘制调用。大多数GPU每帧可以处理> 1m个顶点，但是最多可以处理300-1000个绘制调用。我太简单了，但这只是个球场。

THREEJS-具有自定义UV贴图的缓冲区几何

1 个答案: