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'
//...

Links

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

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