Как добавить пользовательские материалы для 3D-объектов (.mtl) поверх пользовательских 3D-объектов (.obj)?

Question

Я пытаюсь визуализировать 3D-объект с помощью react-three-fiber. Мне удалось импортировать пользовательский 3D-объект, но я не могу применить пользовательский материал к объекту. Любая помощь могла бы быть полезна. Ниже приведен код, который я пробовал до сих пор.

let mat = useLoader(MTLLoader,'/public/IronMan.mtl')
    const objec = useLoader(OBJLoader,url, object =>
      {

        object.setMaterials(mat)
        console.log(object)
      })
    const loader = new OBJLoader();
       loader.load(url,
        function(obj)
        {
          console.log("loaded")
         // console.log(obj)
        });
       // const objec = useLoader(OBJLoader,url)
    console.log(objec)

    loader.setMaterials(mat)
   // console.log(loader)
    //console.log(mat)
    //objec.setMaterials(mat)

    //let mtlLoader = new MTLLoader();

    //let objLoader = new OBJLoader();

    // mtlLoader.load('/public/IronMan.mtl', (materials) => {
    //   materials.preload()
    //   objLoader.setMaterials(materials)
    //   objLoader.load('./test.obj', (object) => {
    //     scene.add(object)
    //   })
    // })

    return (
    <mesh material-color='red'>
      <primitive object={objec}/>
      <meshBasicMaterial attach="material" color="yellow" transparent />
      </mesh>
    )

Answer 1

OBJLoader всегда возвращает объект типа THREE.Groupкоторый является более или менее контейнерным объектом для визуализируемых элементов, таких как сетки, точки или линии. Следовательно, вы не можете нанести на него материал.

В официальном примере загрузчика OBJ материалы изменены следующим образом:

object.traverse( function ( child ) {

    if ( child.isMesh ) child.material.map = texture;

} );

Вместо того, чтобы назначать диффузную текстуру, вы также можете изменить весь материал.

three.js R109