React-three-fiber: How to load a DAE model?

[Darkensses]

I'm trying to load a dae model and i'm using the useLoader like this:

const model = useLoader(ColladaLoader, "path/to/file.dae")

but i'm stuck just there :( I read the docs about GLTFLoader but I can't load the dae file and show it in the browser.

How can I achive this?

[drcmda]

useloader is just a wrap around new XYZLoader().load(url, data => ...) there's nothing that's specific. i haven't used dae before, but you load it in the same way you would always do. make sure it's in your public folder, make sure you have lights, near+far should be correct, it should be in the cameras frustrum to show.

[Darkensses]

Ok, after research more about THREE and read examples, I found how to load a DAE model:

first you need some imports like this:

import { ColladaLoader } from "three/examples/jsm/loaders/ColladaLoader";
import modeldae from "./path/toFile.dae"

if you don't want to put the dae file in the public folder, you need to import it, like the snippet above :) In this way, React copy your assets to the public folder.

Then, you can load your file:

const dae = useLoader(ColladaLoader, modeldae);
console.log(dae)

Print the model object to find the correct attribute to load the geometries, in my case (with the PS Controller dae file) is something like this:

<group ref={group}>
      <mesh visible>
        <bufferGeometry attach="geometry" {...dae.__$[1].geometry} />
        <meshStandardMaterial
          attach="material"
          color="white"
          roughness={0.3}
          metalness={0.3}
          wireframe
        />
      </mesh>
      <mesh visible>
        <bufferGeometry attach="geometry" {...dae.__$[2].geometry} />
        <meshStandardMaterial
          attach="material"
          color="white"
          roughness={0.3}
          metalness={0.3}
          wireframe
        />
      </mesh>
    </group>

and TA-DA 🎉

[drcmda]

the .__$ syntax is a bit old, will be deprecated at some point. see if you can use "nodes". or if you dont want to put down your own materials:

const { scene } = useLoader(ColladaLoader, url)
<primitive object={scene} dispose={null} />

[Darkensses]

Thanks for the tip @drcmda, now is working as I expected that

  const { scene } = useLoader(ColladaLoader, modeldae)   
  return (
    <group ref={group}>
      <primitive 
        dispose={null}
        object={scene}         
        children-0-material={new THREE.MeshBasicMaterial({wireframe: true, color: 0xffffff})}
        children-1-material={new THREE.MeshBasicMaterial({wireframe: true, color: 0x0000ff})}
        children-2-material={new THREE.MeshBasicMaterial({wireframe: true, color: 0x0000ff})}
        children-3-material={new THREE.MeshBasicMaterial({wireframe: true, color: 0x00ff00})}
        children-4-material={new THREE.MeshBasicMaterial({wireframe: true, color: 0x0000ff})}
      />
    </group>

[drcmda]

these materials will be re-created on every render, see: https://github.com/react-spring/react-three-fiber#objects-and-properties

if colada exports the "nodes" prop, check useLoaders result if it's in there, then you can do:

<group dispose={null}>
  <mesh geometry={nodes.nameOfMesh1}>
    <meshBasicMaterial attach="material" ... />
  </mesh>
  <mesh geometry={nodes.nameOfMesh2}>
    <meshBasicMaterial attach="material" ... />
  </mesh>
  ...
</group>

this is what GLTFJSX does as well https://github.com/react-spring/gltfjsx you get the full declarative tree and you can easily make changes that way without having to traverse or rely on shaky indexing.

[Darkensses]

Yeah, got it. You're right, is better use an UseMemo or the correct element like MeshBasicMaterial instead creating instances of a mesh every render. Thanks again @drcmda