What is GLB?
.gltf → JSON + separate textures/files.glb → Everything packed into one file
Most websites use GLB because it's easier and loads faster.
Load GLB Model
Import Loader
import { GLTFLoader } from
'three/examples/jsm/loaders/GLTFLoader.js';
Load Model
const loader = new GLTFLoader();
loader.load(
'/models/shoe.glb',
function(gltf) {
const model = gltf.scene;
model.scale.set(1,1,1);
model.position.set(0,0,0);
scene.add(model);
},
function(xhr) {
console.log(
(xhr.loaded / xhr.total * 100)
+ '% loaded'
);
},
function(error) {
console.log(error);
}
);
DRACO Loader
Without Draco:
shoe.glb = 20 MB
With Draco:
shoe.glb = 2-5 MB
Huge performance improvement.
Import
import { DRACOLoader }
from 'three/examples/jsm/loaders/DRACOLoader.js';
KTX2 Texture Compression
Professional websites use:
GLB + Draco + KTX2
Benefits:
- Faster loading
- Less GPU memory
- Mobile optimization
Import:
import { KTX2Loader }
from 'three/examples/jsm/loaders/KTX2Loader.js';
Used for compressed textures.
Step 1: Create the Sandal in Blender
You make 3 separate objects:
Sandal
├── Sole
├── Top
├── Buckle
In Blender Outliner:
Collection
├── Sole
├── Top
├── Buckle
⚠️ Don't join them (Ctrl + J).
Keep them as separate meshes.
Step 2: Export as GLB
File
→ Export
→ glTF 2.0
→ Format: GLB
Export:
sandal.glb
Inside that single GLB:
Sole Mesh
Top Mesh
Buckle Mesh
are all stored separately.
Step 3: Load in Three.js
const loader = new GLTFLoader();
loader.load('/models/sandal.glb', (gltf) => {
const sandal = gltf.scene;
scene.add(sandal);
});
At this point:
Sole
Top
Buckle
appear together as one sandal.
Step 4: Access Individual Parts
Because they are separate objects in Blender:
loader.load('/models/sandal.glb', (gltf) => {
const sandal = gltf.scene;
const sole =
sandal.getObjectByName("Sole");
const top =
sandal.getObjectByName("Top");
const buckle =
sandal.getObjectByName("Buckle");
scene.add(sandal);
});
Now Three.js can control each part independently.
let sole;
let top;
let buckle;
loader.load('/models/sandal.glb', (gltf) => {
const sandal = gltf.scene;
sole = sandal.getObjectByName("Sole");
top = sandal.getObjectByName("Top");
buckle = sandal.getObjectByName("Buckle");
scene.add(sandal);
});
Animate in the Render Loop
Rotate Only the Buckle
function animate() {
requestAnimationFrame(animate);
if(buckle){
buckle.rotation.y += 0.02;
}
renderer.render(scene, camera);
}
animate();
Only the buckle rotates.
Using GSAP
Most product websites use GSAP.
<script src="https://cdn.jsdelivr.net/npm/gsap@3"></script>
Animate Buckle
gsap.to(buckle.rotation,{
y:Math.PI * 2,
duration:2,
repeat:-1,
ease:"none"
});
