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;
}

在这段代码中，我假设你只有一个身体，一个只有一个纹理的材料。此代码也未经过测试。

使用Three.js绘制.obj文件，不带本机OBJLoader

1 个答案: