javascript - 使用 Three.js 绘制 .obj 文件，无需原生 OBJLoader

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 绘制这些数据。我读过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 。此代码也未经过测试。