threejs-asset-pipeline

1# Three.js Asset Pipeline
2 
3Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.
4 
5## Quick Start
6 
7Compress on the command line, then load the result. Run `inspect` before and after to see what the pass saved:
8 
9```bash
10npx @gltf-transform/cli inspect model.glb
11npx @gltf-transform/cli optimize model.glb model.opt.glb --compress draco --texture-compress webp --texture-size 2048
12npx @gltf-transform/cli inspect model.opt.glb
13```
14 
15Draco output needs a DRACOLoader attached; WebP textures decode in the browser:
16 
17```javascript
18import * as THREE from "three";
19import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
20import { DRACOLoader } from "three/addons/loaders/DRACOLoader.js";
21 
22const renderer = new THREE.WebGLRenderer({ antialias: true });
23renderer.setPixelRatio(window.devicePixelRatio);
24renderer.setSize(window.innerWidth, window.innerHeight);
25document.body.appendChild(renderer.domElement);
26 
27const scene = new THREE.Scene();
28const sun = new THREE.DirectionalLight(0xffffff, 2); // glTF PBR materials render black without lights or an environment
29sun.position.set(3, 5, 2);
30scene.add(sun, new THREE.HemisphereLight(0xffffff, 0x444444, 1.5));
31 
32const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 100);
33camera.position.set(2, 1.5, 3);
34camera.lookAt(0, 0, 0);
35 
36const gltf = await new GLTFLoader()
37  .setDRACOLoader(new DRACOLoader()) // the Draco WASM decoder loads from the three package
38…