Three.js - Import Models

Wie importiert man Models in Three.js und welche Dateiformate sind sinnvoll?

Quickstart

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
//...
const gltfLoader = new GLTFLoader()
gltfLoader.load(
    '/models/Duck/glTF/Duck.gltf',
    () => {console.log('success')},
    () => {console.log('progress')},
    (error) => {console.log(error)}
)

Links

ThreeJS - Snippets
https://threejs-journey.com/lessons/23 - englischsprachige Teile in diesem Artikel und Beispiele

Others

https://en.wikipedia.org/wiki/List_of_file_formats#3D_graphics Formats (wiki)
https://threejs.org/editor/ Three.js editor

GLTF sample models

https://github.com/KhronosGroup/glTF-Sample-Models Repository
https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/Duck Duck
https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/Fox Fox

Draco

https://github.com/google/draco Repository
https://google.github.io/draco/ Website

Three.js documentation

https://threejs.org/docs/#api/en/objects/Mesh Mesh
https://threejs.org/docs/#api/en/materials/MeshStandardMaterial MeshStandardMaterial
https://threejs.org/docs/#api/en/lights/AmbientLight AmbientLight
https://threejs.org/docs/#api/en/lights/DirectionalLight DirectionalLight
https://threejs.org/docs/#examples/en/loaders/GLTFLoader GLTFLoader
https://threejs.org/docs/index.html#api/en/loaders/TextureLoader TextureLoader
https://threejs.org/docs/#api/en/loaders/managers/LoadingManager LoadingManager
https://threejs.org/docs/#api/en/objects/Group Group
https://threejs.org/docs/#api/en/core/Object3D Object3D
https://threejs.org/docs/#api/en/cameras/PerspectiveCamera PerspectiveCamera
https://threejs.org/docs/#examples/en/loaders/DRACOLoader DracoLoader
https://threejs.org/docs/#api/en/objects/Bone Bone
https://threejs.org/docs/#api/en/objects/SkinnedMesh SkinnedMesh
https://threejs.org/docs/#api/en/animation/AnimationClip AnimationClip
https://threejs.org/docs/#api/en/animation/AnimationMixer AnimationMixer
https://threejs.org/docs/#api/en/animation/AnimationAction AnimationAction

Tipps

• Nach dem Import immer über Console checken was drin ist.
• Wichtig Scale und Transform Values checken. Dann weißt du gleich wo du suchen mußt wenn du nichts siehts.

Dateiformate

GLTF

• Von der Khronos Group (OpenGL, WebGL...) erfüllt viele Zwecke gerade wenn man im Web unterwegs ist.
• Kann einen Scene Graph mit übernehmen
• Kann JSON, binary, embeded textures mit einbinden
• Stand 2021 quasi Standard - funktioniert auch mit Unity, Blender etc.

andere können aber auch sinnvoll sein: obj, effizient - ply klein schnelle dekompression....

Verschiedene Varianten

glTF - Standard, Alle Assets einzeln in einem Ordner
glTF-Binary - alle Assets in einer Binären Datei
glTF-Draco - Eine Datei mit Draco Kompression (sehr klein muss aber entpackt werden)
glTF-Embedded - Alle Dateien aus Standard Base64(?) Kodiert in einer Text-Datei

In den Beispielen nutzen wir gltf

Loader

Add the loaded model to our scene

Wo ist was?

If you look at the object logged in the console, you'll find a lot of elements. The most important part is the scene property because we have only one scene in the exported model.

This scene contains everything we need. But it also includes more. Always start by studying what is available in it and watch the scale property of the different Groups, Object3D, and Mesh.

We get something like this:

THREE.Group: scene
└───Array: children
    └───THREE.Object3D
        └───Array: children
            ├───THREE.PerspectiveCamera
            └───THREE.Mesh

The Mesh should be our duck. We don't really care about the PerspectiveCamera. Both the camera and the duck seem to be in the first and only Object3D in the scene's children array. Even worst, that Object3D has a scale set to a minimal value.

As you can see, it's a little complex even to get our duck, and it's where most beginners get lost.

All we want is to get our duck in the scene. We have multiples ways of doing it:

   Add the whole scene in our scene. We can do that because even if its name is scene, it's in fact a Group.
   Add the children of the scene to our scene and ignore the unused PerspectiveCamera.
   Filter the children before adding to the scene to remove the unwanted objects like the PerspectiveCamera.
   Add only the Mesh but end up with a duck that could be wrongly scaled, positioned or rotated.
   Open the file in a 3D software and remove the PerspectiveCamera then export it again.

Because our model structure is simple, we will add the Object3D to our scene, and ignore the unused PerspectiveCamera inside. In future lessons, we will add the whole scene as one object

gltfLoader.load(
    '/models/Duck/glTF/Duck.gltf',
    (gltf) =>
    {
        scene.add(gltf.scene.children[0])
    }
)

Mehrere Children

Vorsicht wenn es mehrere Children gibt die man alle importieren möchte:

Die erste Lösung funktioniert nicht richtig. Bei jedem Schleifendurchlauf wird das Element aus dem (besonderen) gltf Array entnommen. Das Array verkürzt sich. Der Index der Schleife bleibt aber gleich, daher werden Objekte ausgelassen.

// NOT WORKING
for(const child of gltf.scene.children){ // not working properly
  scene.add(child)
}
// WORKING
while(gltf.scene.children.length){
  scene.add(gltf.scene.children[0])
}
// WORKING TOO
const children = [...gltf.scene.children] // duplicate
for(const child of children){
  scene.add(child)
}
// WORKING TOO
for(let i = gltf.scene.children.length; i > 0; i--){
  scene.add(gltf.scene.children[0])
}

Draco Compression

• Benötigt den Dracoloader
• As we saw when browsing the files, the Draco version can be much lighter than the default version. Compression is applied to the buffer data (typically the geometry). It doesn't matter if you are using the default glTF, the binary glTF or the embedded glTF.
• It's not even exclusive to glTF, and you can use it with other formats. But both glTF and Draco got popular simultaneously, so the implementation went faster with glTF exporters.
• Google develops the algorithm under the open-source Apache License