OBJLoader how to add .mtl and .png texture

[brice-noowu]

I and thank you for your amazing work.

I have an .obj model that comes with a .mtl and a .png texture and I don't know how to add those two in a declarative way.

This is what I have in my scene for the moment :

<th-object3D loadObj url="assets/models/test.obj"> </th-object3D>

The model is loaded but comes with no textures. Is there a way to add the .mtl and .png declaratively, or do I have to grab a reference to the object3D with a template variable, and manipulate it from the controller ?

Thanks !

Edit : I tried this, according to the doc :

    <th-mesh>
      <th-bufferGeometry loadObj
                         url="assets/models/test.obj"> </th-bufferGeometry>
      <th-meshStandardMaterial [args]="{ color: '#0055ff', flatShading: true }"></th-meshStandardMaterial>
    </th-mesh>

But the model still stays white 🧐

[demike]

According to a three.js comment (https://discourse.threejs.org/t/load-texture-to-obj/32451/2) you could inject a TextureLoader and ObjLoader in your class and then recursively apply the texture.

Simplified Example:

ExampleComponent.ts

// ...
public async load() {
    const [ texture, obj ] = await Promise.all( [
		this.textureLoader.loadAsync( 'models/obj/texture.png' ),
		this.objLoader.loadAsync( 'models/obj/model.obj' ),
	] );

	obj.traverse( function ( child ) {

	if ( child.isMesh ) {

	    child.material.map = texture;
	    child.geometry.computeVertexNormals();

	}

    });
    this.obj = obj;
}
// ...

TestComponent.html

<th-object3D [objRef]="obj"> </th-object3D>