Object 装载机问题

我为我的webgl项目编写了一个.obj文件加载器。目前它非常简单。它可以加载相对简单的模板，但我无法加载stanford dragon。输出根本不起作用。下面是结果的图片。我真的迷路了，因为我的代码似乎是正确的。但是，我对.obj文件没有太多经验，肯定是出了什么问题

如果有人能帮我，告诉我什么不管用，我真的很感激

这是指向github回购的链接：

这是OBJ加载器类的代码：

class CubeObj {

constructor(gl) {
    this.gl = gl;
    this.object = {};

    this.object.texte = `add OBJ file here`;
    
    this.object.numIndices = 0;

    this.vertexData = [0, 0, 0];
    this.textureCoords = [0, 0];
    this.vertexNormals = [0, 0, 0];
    this.vertexIndices = [];

    this.vData = [0, 0, 0];
    this.tCoords = [0, 0];
    this.vNormals = [0, 0, 0];

    this.positionBuffer = null;
    this.indicesBuffer = null;
    this.normalesBuffer = null;
    this.textureBuffer = null;

    this.processObject();
    this.computeBuffers();
}

getSize() {
    return this.object.numIndices;
}

processObject() {

    var data = this.object.texte.trim().split('\n');
    data = data.map(n => n.trim());

    data.forEach((string) => {
        if (string.startsWith('v ')) {
            let line = string.split(' ');
            this.vData.push(parseFloat(line[1]), parseFloat(line[2]), parseFloat(line[3]));
        }
        else if (string.startsWith('vt ')) {
            let line = string.split(' ');
            this.tCoords.push(parseFloat(line[1]), parseFloat(line[2]));
        }
        else if (string.startsWith('vn ')) {
            let line = string.split(' ');
            this.vNormals.push(parseFloat(line[1]), parseFloat(line[2]), parseFloat(line[3]));
        }
        else if (string.startsWith('f ')) {

            this.vertexIndices.push(++this.object.numIndices);
            this.vertexIndices.push(++this.object.numIndices);
            this.vertexIndices.push(++this.object.numIndices);

            let index1 = string.split(' ')[1]
            let index2 = string.split(' ')[2]
            let index3 = string.split(' ')[3]

            this.processVertex(index1);
            this.processVertex(index2);
            this.processVertex(index3);
        }
    });
}

processVertex(index) {

    let vertexIndex = 3 * parseInt(index.split('/')[0]);
    let textureIndex = 2 * parseInt(index.split('/')[1]);
    let normalIndex = 3 * parseInt(index.split('/')[2]);

    this.vertexData.push(this.vData[vertexIndex]);
    this.vertexData.push(this.vData[vertexIndex + 1]);
    this.vertexData.push(this.vData[vertexIndex + 2]);

    this.textureCoords.push(this.tCoords[textureIndex]);
    this.textureCoords.push(this.tCoords[textureIndex + 1]);

    this.vertexNormals.push(this.vNormals[normalIndex]);
    this.vertexNormals.push(this.vNormals[normalIndex + 1]);
    this.vertexNormals.push(this.vNormals[normalIndex + 2]);
}

computeBuffers = () => {

    this.positionBuffer = this.gl.createBuffer();
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(this.vertexData), this.gl.STATIC_DRAW);

    this.indicesBuffer = this.gl.createBuffer();
    this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.indicesBuffer);
    this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(this.vertexIndices), this.gl.STATIC_DRAW);

    this.normalesBuffer = this.gl.createBuffer();
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.normalesBuffer);
    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(this.vertexNormals), this.gl.STATIC_DRAW);

    this.textureBuffer = this.gl.createBuffer();
    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.textureBuffer);
    this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(this.textureCoords), this.gl.STATIC_DRAW);

}


getBuffers = () => {
    return {
        position: this.positionBuffer,
        indices: this.indicesBuffer,
        normales: this.normalesBuffer,
        textureCoords: this.textureBuffer,
    }
}

祝你今天愉快

---

François

为了弄清楚这一点，我编写了一个代码正在使用的WebGL函数的快速emu，刚好可以使用它按原样运行代码并查看结果。当然，我可以在调试器中查看它

gl = {
  createBuffer() { return []; },
  bindBuffer(t, b) { this.b = b; },
  bufferData(t, d, h) { this.b.splice(0, this.b.length, ...d); },
};

然后，我抓起一个cube.obj文件，从每个文件开始检查每个细节

我是这样运行的

const c = new CubeObj(gl);
console.log(c.getBuffers());

导致

我们知道一个立方体应该有36个索引，但只有18个

问题是

f

行可以有3个以上的顶点

我把密码改成了这个

 } else if (string.startsWith('f ')) {

    let verts = string.split(' ').slice(1);
    const numTriangles = verts.length - 2;
    for (let i = 0; i < numTriangles; ++i) {
      this.vertexIndices.push(++this.object.numIndices);
      this.vertexIndices.push(++this.object.numIndices);
      this.vertexIndices.push(++this.object.numIndices);
      this.processVertex(verts[0]);
      this.processVertex(verts[i + 1]);
      this.processVertex(verts[i + 2]);
    }
  }

}else if（string.startsWith（'f'））{
设verts=string.split（“”）.slice（1）；
常量numTriangles=顶点长度-2；
for（设i=0；i

这似乎有效

const obj=`
#Blender v2.80（sub 75）OBJ文件：“”
#www.blender.org
mtllib cube.mtl
立方体
v 1.000000 1.000000-1.000000
v 1.000000-1.000000-1.000000
v 1.000000 1.000000 1.000000
v 1.000000-1.000000 1.000000
v-1.000000-1.000000-1.000000
v-1.000000-1.000000-1.000000
v-1.0000001.0000001.000000
v-1.000000-1.0000001.000000
瓦特0.375000 0.000000
瓦特0.62500000.000000
瓦特0.625000 0.250000
0.375000瓦特0.250000瓦特
0.375000瓦特0.250000瓦特
瓦特0.625000 0.250000
瓦特0.625000 0.500000
0.375000瓦特0.500000瓦特
瓦特0.625000 0.750000
瓦特0.375000 0.750000
瓦特0.625000 0.750000
瓦特0.625000 1.000000
0.3750001.000000瓦特
瓦特0.125000 0.500000
0.375000瓦特0.500000瓦特
瓦特0.375000 0.750000
瓦特0.125000 0.750000
瓦特0.625000 0.500000
瓦特0.875000 0.500000
瓦特0.875000 0.750000
越南盾0.0000 1.0000 0.0000
越南盾0.0000 0.0000 1.0000
越南盾-1.0000 0.0000 0.0000
越南盾0.0000-1.0000 0.0000
越南盾1.0000 0.0000 0.0000
越南盾0.0000 0.0000-1.0000
使用材料
他走了
f 1/1/1 5/2/1 7/3/1 3/4/1
f 4/5/2 3/6/2 7/7/2 8/8/2
f 8/8/37/7/35/9/36/10/3
f 6/10/4 2/11/4 4 4/12/4 8/13/4
f 2/14/5 1/15/5 3/16/5 4/17/5
f 6/18/6 5/19/6 1/20/6 2/11/6
`;
类CubeObj{
建造师（gl）{
this.gl=gl；
this.object={}；
this.object.texte=obj；
this.object.numIndices=0；
this.vertexData=[0,0,0]；
this.textureCoords=[0,0]；
this.vertexNormals=[0,0,0]；
this.vertexIndices=[]；
this.vData=[0,0,0]；
this.tcoods=[0,0]；
this.vNormals=[0,0,0]；
this.positionBuffer=null；
this.indicatesbuffer=null；
this.normalesBuffer=null；
this.textureBuffer=null；
this.processObject（）；
这个.computeBuffers（）；
}
getSize（）{
返回this.object.numIndices；
}
processObject（）{
var data=this.object.texte.trim（）.split（'\n'）；
data=data.map（n=>n.trim（））；
data.forEach（（字符串）=>{
if（string.startsWith（'v'））{
let line=string.split（“”）；
this.vData.push（parseFloat（第[1]行）、parseFloat（第[2]行）、parseFloat（第[3]行））；
}else if（string.startsWith（'vt'））{
let line=string.split（“”）；
this.tcoods.push（parseFloat（第[1]行）、parseFloat（第[2]行））；
}else if（string.startsWith（'vn'））{
let line=string.split（“”）；
this.vNormals.push（parseFloat（第[1]行）、parseFloat（第[2]行）、parseFloat（第[3]行））；
}else if（string.startsWith（'f'））{
设verts=string.split（“”）.slice（1）；
常量numTriangles=顶点长度-2；
for（设i=0；i{
this.positionBuffer=this.gl.createBuffer（）；
this.gl.bindBuffer（this.gl.ARRAY\u BUFFER，this.positionBuffer）；
this.gl.bufferData（this.gl.ARRAY\u BUFFER，new Float32Array（this.vertexData），this.gl.STATIC\u DRAW）；
this.indicesBuffer=this.gl.createBuffer（）；
this.gl.bindBuffer（this.gl.ELEMENT\u ARRAY\u BUFFER，this.indicatesbuffer）；
this.gl.bufferData（this.gl.ELEMENT\u ARRAY\u BUFFER，新UINT16数组（this.vertexIndices），this.gl.STATIC\u DRAW）；
this.normalesBuffer=this.gl.createBuffer（）；
this.gl.bindBuffer（this.gl.ARRAY\u BUFFER，this.normalesBuffer）；
this.gl.bufferData（this.gl.ARRAY\u BUFFER、新Float32Array（this.vertexNormals）、this.gl.STATIC\u DRAW）；
this.textureBuffer=this.gl.createBuffer（）；
this.gl.bindBuffer（this.gl.ARRAY\u BUFFER，th