🚀 THREE.js Lesson: Loading .GLTF & .OBJ Models

This lesson shows how to load and display 3D models in glTF (.gltf/.glb) and OBJ (.obj) formats using THREE.js loaders.

📦 Example Code

// Include THREE.js r146 global scripts
// Setup scene, camera, renderer, and controls
const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 5);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;

const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);

// Load glTF model
const gltfLoader = new THREE.GLTFLoader();
gltfLoader.load('https://threejs.org/examples/models/gltf/DamagedHelmet/glTF/DamagedHelmet.gltf', function(gltf) {
  gltf.scene.position.set(-1.5, 0, 0);
  scene.add(gltf.scene);
}, undefined, function(error) {
  console.error('GLTF load error:', error);
});

// Load OBJ model
const objLoader = new THREE.OBJLoader();
objLoader.load('https://threejs.org/examples/models/obj/walt/WaltHead.obj', function(obj) {
  obj.position.set(1.5, 0, 0);
  scene.add(obj);
}, undefined, function(error) {
  console.error('OBJ load error:', error);
});

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

window.addEventListener('resize', function() {
  camera.aspect = window.innerWidth/window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

💡 Pro Tip: Always host your models on a server or use public URLs. Local file loading usually fails due to browser CORS security.