在没有原生 OBJLoader 的情况下使用 Three.js 绘制 .obj 文件

Question

我需要绘制 .obj 文件，但不加载它。例如我有 .obj 文件，内容如下

v 0.1 0.2 0.3
v 0.2 0.1 0.5
vt 0.5 -1.3
vn 0.7 0.0 0.7
f 1 2 3

我读了这个文件，解析了内容并将它的数据放在了一个 JavaScript 对象中。

{
  v: [
    {x:0.1, 0.2, 0.3}
    {x:0.2, 0.1, 0.5}
  ],
  vt: [
    {u: 0.5, v: -1.3}
  ],
  vn: [
    {x: 0.7, 0.0, 0.7}
  ],
  f: [
    // ...
  ]
}

接下来我需要用 three.js. I read documentation 绘制此数据，但找不到任何示例或说明如何操作。谁知道？有什么方法可以达到这个目的吗？

Answer 1

第一个问题是，你为什么不使用 THREE.ObjLoader？我不清楚原因。加载 obj 文件可能有很多不同的测试用例。用THREE.ObjLoader比较好。

如果你不能用那个我的首选方法是创建一个 THREE.BufferGeometry。我们将从您的 javascript 对象的数组中创建一些 THREE.BufferAttribute。每个顶点属性一个 THREE.BufferAttribute。此外，我们将设置索引缓冲区。这是一个功能 -

function make_3D_object(js_object) {

    let vertices = new Float32Array(js_object.v);
    let uvs = new Float32Array(js_object.vt);
    let normals = new Float32Array(js_object.vn);

    let indices = new Uint8Array(js_object.f);

    // this is to make it 0 indexed
    for(let i = 0; i < indices.length; i++)
        indices[i]--;


    let geom = new THREE.BufferGeometry();
    geom.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
    geom.addAttribute('normal', new THREE.BufferAttribute(normals, 3));
    geom.addAttribute('uv', new THREE.BufferAttribute(uvs, 2));
    geom.setIndex(new THREE.BufferAttribute(indices, 1));


    let material = new THREE.MeshPhongMaterial( {
        map: js_object.texture, // assuming you have texture
        color: new THREE.Color().setRGB(1, 1, 1),
        specular: new THREE.Color().setRGB(0, 0,0 )
    } );


    let obj_mesh = new THREE.Mesh(geom, material);

    return obj_mesh;
}

在这段代码中，我假设您只有一个主体，一个只有纹理的 material。此代码也未经过测试。

在没有原生 OBJLoader 的情况下使用 Three.js 绘制 .obj 文件

Draw .obj file with Three.js without native OBJLoader

javascript

.obj

three.js