Understanding Model Formats (GLTF/GLB, OBJ, FBX)
In the world of 3D, models are the building blocks of your scenes. Just like you wouldn't create every pixel of an image yourself when designing a website, you often won't create every 3D model from scratch. Instead, you'll load them from external files. But not all 3D files are created equal. Let's explore the most common formats you'll encounter in Three.js development.
GLTF/GLB: The Modern Standard
GLTF (GL Transmission Format) is rapidly becoming the standard for 3D on the web. It's designed to be efficient, versatile, and easy to use. GLB is a binary version of GLTF, meaning all the data (geometry, textures, etc.) is packed into a single file, making it simpler to manage and load. It's the recommended format for most modern Three.js projects.
const loader = new GLTFLoader();
loader.load('path/to/your/model.glb', function (gltf) {
scene.add(gltf.scene);
}, undefined, function (error) {
console.error(error);
});OBJ (Wavefront OBJ): A Longstanding Favorite
OBJ is one of the oldest and most widely supported 3D file formats. It's a text-based format, meaning you can open and read its contents in a simple text editor. While it's a good fallback, OBJ typically doesn't support animations and can be less efficient than GLTF, especially for complex scenes or when textures are involved (usually requiring a separate .mtl file for materials).
const loader = new OBJLoader();
loader.load('path/to/your/model.obj', function (object) {
scene.add(object);
}, undefined, function (error) {
console.error(error);
});FBX (Filmbox): The Industry Workhorse