使用没有原生 OBJLoader 的 Three.js 绘制 .obj 文件答案

【问题标题】：Draw .obj file with Three.js without native OBJLoader使用没有原生 OBJLoader 的 Three.js 绘制 .obj 文件
【发布时间】：2017-08-11 14:11:26
【问题描述】：

我需要在不加载的情况下绘制 .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，但找不到任何示例或说明如何做到这一点。谁知道？有什么方法可以达到这个目的吗？

【问题讨论】：

加载文件文本后，可以使用OBJLoader的解析功能var myObj = THREE.OBJLoader.parse(text);
@2pha 我不能使用它，因为此方法接受一个参数text — The textual obj structure to parse 但我没有文本 obj 结构。我有一个 javascript 对象
你是如何阅读文件的？
你为什么不用OBJLoader？您可以查看source of OBJLoader 并根据自己的需要进行调整
@2pha 让我们想象一下，我没有文件。我有一个流或其他东西，我需要画这个

标签： javascript three.js .obj

【解决方案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;
}

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

【讨论】：