Load a Local glTF Model
Assets & scale
Lesson 11 of 15
Load a real project asset with GLTFLoader and organize module code across files.
Import GLTFLoader, load a self-authored pyramid from the project, and reuse a color from a local JavaScript module.
How this scene works
Module mode uses explicit imports from @playground/runtime and the supported three/addons paths. The relative ./palette.js import is another editable project file. assetUrl resolves assets/pyramid.gltf to a local project URL. This glTF 2.0 fixture contains its geometry in a data URI, so it has no network dependency. GLTFLoader also accepts binary .glb assets; change the filename after uploading one. The loader is awaited before the run becomes ready, and the loaded Scene is added as a child of the playground Scene.
Included project files
palette.jsassets/pyramid.gltfLoad a Local glTF Model
ES modules · Three.js 0.183.1 · WebGL
Loading draft
3 files · local only
Drag to orbit, scroll to zoom, right-drag to pan.
Make it your own
Edit accent in palette.js, then change the pyramid material's roughness. Upload your own self-contained .glb, update assetUrl, and inspect its hierarchy before adjusting the camera.
Change one thing, run the scene, and compare. Pause animation to inspect the result; reset the example to return to its original code and files.
