THREE.JS / FOUNDATIONS 247

Author it. Export it. Load it back.

The exporter is the bridge between a Three.js scene and a portable glTF asset. This lab keeps the authored graph visible beside its JSON or binary round-trip so transforms, materials, animation, lights, and extension metadata can be inspected as data instead of trusted as a download.

Preparing export fixture—

Building a small authored scene and its round-trip inspection surface…

backend: —
source graph: —
last export: —
round-trip: —
frame ms: —

Exporter controlsready

include animation only visible objects export TRS transforms include custom extension

max texture size 64

animate source and round-trip auto-rotate camera

Export JSON or GLB to create an in-memory artifact; the load buttons then parse that exact artifact through GLTFLoader.

Portable asset contractGLTFExporter

authored scenewaiting

source graph

JSON outputnot exported

human-readable .gltf

GLB outputnot exported

binary .glb

round-tripnot loaded

loader comparison

extensionswaiting

built-in + custom

The exporter writes portable geometry, textures, materials, animation clips, cameras, lights, and supported glTF extensions. The loader is the independent consumer that proves the artifact is usable after export.

The round-trip comparison is local evidence for this generated fixture, not a universal guarantee for arbitrary Three.js scenes.

Derived from the official glTF exporter example, GLTFExporter, GLTFLoader, MeshPhysicalMaterial, and AnimationClip. Use ?forceWebGL=1 to inspect the labeled WebGL2 preview.

AUTHORED SCENE ← source graph

ROUND-TRIP parsed artifact →

LAB 247 / GLTF EXPORT + LOAD