One question that arises is, why choose not to utilize THREE.ObjLoader? The rationale behind this decision remains murky to me. There are numerous potential test scenarios for loading obj files, making it advantageous to opt for THREE.ObjLoader.
If, however, you are unable to employ that method, I would suggest creating a THREE.BufferGeometry. This entails generating several THREE.BufferAttribute instances from the arrays within your JavaScript object. Each vertex attribute will be represented by one THREE.BufferAttribute, along with setting the index buffer. Below is a function accomplishing these tasks:
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);
// Ensuring 0 indexing
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 texture is available
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;
}
This code assumes the presence of a singular body, a solitary material containing only a texture. Additionally, it should be noted that this code has not been subjected to testing.