One loader to rule them all

[mudroljub]

Description

There are many different file types for 3d models and many different loaders in Three.js.

In my hobby project I solved it by creating an abstraction - the loadModel function receives any file and loads it, using the appropriate loader, without the user having to choose and import the appropriate loader himself.

Solution

This is the main function that calls the appropriate loader based on the file type:

export const loadModel = async param => {
  const params = typeof param === 'object' ? param : { file: param }
  const ext = params.file.split('.').pop()
  switch (ext) {
    case 'obj':
      return loadObj(params)
    case 'glb':
    case 'gltf':
      return loadGlb(params)
    case 'dae':
      return loadDae(params)
    case 'md2':
      return loadMd2(params)
    case 'fbx':
      const { prefix, file, animDict } = params
      if (prefix) {
        params.file = prefix + file
        if (animDict) params.animations = await loadFbxAnimations(animDict, prefix)
      }
      return loadFbx(params)
    default:
      throw new Error(`Unknown file extension: ${ext}`)
  }
}

You can see the rest of the logic here:
https://github.com/create-3d-worlds/create-3d-worlds.github.io/blob/master/core/loaders.js

Alternatives

P.s. I am not proposing to copy-paste my solution, but to implement a similar pattern.

Additional context

No response

[Mugen87]

There is similar code in the three.js editor but we avoided to implement a separate component/addon. Many apps don't require a variety of 3D asset loading since they mostly rely on glTF these days. Besides, supporting many formats means app bundles must include a lot of loader code unless it is imported dynamically. A even then it must be served by the application.

Feel free to share your code at the forum instead. There is a dedicated category Resources that you can use.

[mudroljub]

Thanks for this detailed clarification.