在不具有本機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繪制此數據。 我閱讀了文檔 ，但是找不到任何示例或說明。 誰知道？ 有沒有為此目的的方法？

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

在這段代碼中，我假設您只有一個實體，只有一種材質只有紋理。 同樣，此代碼未經測試。