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
FBX is a proprietary format developed by Autodesk, widely used in game development and professional 3D animation pipelines. It's very powerful, supporting complex scenes, animations, rigging, and more. However, it can be more challenging to work with in web contexts due to its proprietary nature and the need for specific loaders. For web-first projects, GLTF is generally preferred for its ease of use and open standard.