The OBJ loader provides support for Wavefront OBJ 3D object files with associated MTL material files. It includes comprehensive configuration options for geometry processing, material handling, and coordinate system transformations.
Main loader class for OBJ files with extensive static configuration options.
/**
* Main OBJ file loader with comprehensive geometry and material processing options
*/
class OBJFileLoader implements ISceneLoaderPluginAsync, ISceneLoaderPluginFactory {
// Static configuration options
static OPTIMIZE_WITH_UV: boolean; // Default: true
static INVERT_Y: boolean; // Default: false
static INVERT_TEXTURE_Y: boolean; // Getter/setter for texture coordinate inversion
static IMPORT_VERTEX_COLORS: boolean; // Default: false
static COMPUTE_NORMALS: boolean; // Default: false
static OPTIMIZE_NORMALS: boolean; // Default: false
static UV_SCALING: Vector2; // Default: (1, 1)
static SKIP_MATERIALS: boolean; // Default: false
static MATERIAL_LOADING_FAILS_SILENTLY: boolean; // Default: true
static USE_LEGACY_BEHAVIOR: boolean; // Default: false
// Core properties
readonly name: string; // "obj"
readonly extensions: string; // ".obj"
constructor(loadingOptions?: Partial<Readonly<OBJLoadingOptions>>);
createPlugin(options: SceneLoaderPluginOptions): ISceneLoaderPluginAsync;
importMeshAsync(meshesNames: any, scene: Scene, data: any, rootUrl: string, onProgress?: (event: ISceneLoaderProgressEvent) => void, fileName?: string): Promise<ISceneLoaderAsyncResult>;
loadAsync(scene: Scene, data: any, rootUrl: string, onProgress?: (event: ISceneLoaderProgressEvent) => void, fileName?: string): Promise<void>;
loadAssetContainerAsync(scene: Scene, data: any, rootUrl: string, onProgress?: (event: ISceneLoaderProgressEvent) => void, fileName?: string): Promise<AssetContainer>;
}Usage Examples:
import { OBJFileLoader } from "@babylonjs/loaders";
import { SceneLoader, Vector2 } from "@babylonjs/core";
// Basic usage with automatic loader selection
const result = await SceneLoader.ImportMeshAsync("", "/models/", "chair.obj", scene);
// Configure static options before loading
OBJFileLoader.IMPORT_VERTEX_COLORS = true;
OBJFileLoader.COMPUTE_NORMALS = true;
OBJFileLoader.UV_SCALING = new Vector2(2, 2);
const result2 = await SceneLoader.ImportMeshAsync("", "/models/", "textured_model.obj", scene);
// Create configured loader instance
const loader = new OBJFileLoader({
optimizeWithUV: true,
invertY: false,
importVertexColors: true,
computeNormals: true,
skipMaterials: false
});
SceneLoader.RegisterPlugin(loader);Configuration options for OBJ loading behavior.
type OBJLoadingOptions = {
/** Optimize geometry with UV coordinates (default: true) */
optimizeWithUV: boolean;
/** UV coordinate scaling factor (default: Vector2(1, 1)) */
UVScaling: Vector2;
/** Invert Y axis coordinates (default: false) */
invertY: boolean;
/** Invert texture Y coordinates (default: false) */
invertTextureY: boolean;
/** Import vertex color data if present (default: false) */
importVertexColors: boolean;
/** Compute vertex normals if not present (default: false) */
computeNormals: boolean;
/** Optimize computed normals (default: false) */
optimizeNormals: boolean;
/** Skip loading material files (default: false) */
skipMaterials: boolean;
/** Material loading failures don't stop model loading (default: true) */
materialLoadingFailsSilently: boolean;
/** Use legacy parsing behavior for compatibility (default: false) */
useLegacyBehavior: boolean;
};Loader for MTL (Material Template Library) files associated with OBJ files.
/**
* Loader for MTL material files that define materials referenced by OBJ files
*/
class MTLFileLoader {
/** Invert texture Y coordinates (default: true) */
static INVERT_TEXTURE_Y: boolean;
/** Array of loaded materials */
materials: StandardMaterial[];
/**
* Parse MTL file data and create Babylon.js materials
* @param scene - Target scene for materials
* @param data - MTL file content as string or ArrayBuffer
* @param rootUrl - Root URL for resolving texture paths
* @param assetContainer - Optional asset container for isolated loading
*/
parseMTL(
scene: Scene,
data: string | ArrayBuffer,
rootUrl: string,
assetContainer: Nullable<AssetContainer>
): void;
}Usage Example:
import { MTLFileLoader } from "@babylonjs/loaders";
// Manual MTL loading (usually automatic with OBJ files)
const mtlLoader = new MTLFileLoader();
const mtlData = await fetch("/models/materials.mtl").then(r => r.text());
mtlLoader.parseMTL(scene, mtlData, "/models/", null);
console.log(`Loaded ${mtlLoader.materials.length} materials`);
// Access loaded materials
mtlLoader.materials.forEach((material, index) => {
console.log(`Material ${index}: ${material.name}`);
});Advanced OBJ file parsing utilities with regex pattern matching.
/**
* Advanced OBJ file parser with regex pattern matching for all OBJ elements
*/
class SolidParser {
// Static regex patterns for OBJ parsing
static ObjectDescriptor: RegExp;
static GroupDescriptor: RegExp;
static MtlLibGroupDescriptor: RegExp;
static UseMtlDescriptor: RegExp;
static SmoothDescriptor: RegExp;
static VertexPattern: RegExp;
static NormalPattern: RegExp;
static UVPattern: RegExp;
static FacePattern1: RegExp;
static FacePattern2: RegExp;
static FacePattern3: RegExp;
static FacePattern4: RegExp;
static FacePattern5: RegExp;
static LinePattern1: RegExp;
static LinePattern2: RegExp;
static LinePattern3: RegExp;
/**
* Create parser instance
* @param materialToUse - Array of material names to use
* @param babylonMeshesArray - Array to store created meshes
* @param loadingOptions - Loading configuration options
*/
constructor(
materialToUse: string[],
babylonMeshesArray: Array<Mesh>,
loadingOptions: OBJLoadingOptions
);
/**
* Parse OBJ file data and create Babylon.js meshes
* @param meshesNames - Names of meshes to import (null for all)
* @param data - OBJ file content as string
* @param scene - Target scene
* @param assetContainer - Optional asset container for isolated loading
* @param onFileToLoadFound - Callback when external file references found
*/
parse(
meshesNames: any,
data: string,
scene: Scene,
assetContainer: Nullable<AssetContainer>,
onFileToLoadFound: (fileToLoad: string) => void
): void;
}import { OBJFileLoader, Vector2 } from "@babylonjs/loaders";
// Optimize geometry with UV coordinates
OBJFileLoader.OPTIMIZE_WITH_UV = true;
// Scale UV coordinates (useful for tiled textures)
OBJFileLoader.UV_SCALING = new Vector2(2.0, 2.0);
// Import vertex colors if present in OBJ file
OBJFileLoader.IMPORT_VERTEX_COLORS = true;
// Compute normals for meshes without normal data
OBJFileLoader.COMPUTE_NORMALS = true;
OBJFileLoader.OPTIMIZE_NORMALS = true;import { OBJFileLoader } from "@babylonjs/loaders";
// Invert Y axis for coordinate system conversion
OBJFileLoader.INVERT_Y = true;
// Control texture coordinate orientation
OBJFileLoader.INVERT_TEXTURE_Y = false;import { OBJFileLoader } from "@babylonjs/loaders";
// Skip material loading entirely (geometry only)
OBJFileLoader.SKIP_MATERIALS = true;
// Allow model loading even if materials fail to load
OBJFileLoader.MATERIAL_LOADING_FAILS_SILENTLY = true;
// Use legacy behavior for compatibility with older OBJ files
OBJFileLoader.USE_LEGACY_BEHAVIOR = false;Load OBJ files into isolated containers:
import { OBJFileLoader } from "@babylonjs/loaders";
const loader = new OBJFileLoader();
const assetContainer = await loader.loadAssetContainerAsync(scene, objData, rootUrl);
// Assets loaded but not added to scene
console.log(`Loaded ${assetContainer.meshes.length} meshes`);
console.log(`Loaded ${assetContainer.materials.length} materials`);
// Selectively add to scene
assetContainer.meshes.forEach(mesh => {
if (mesh.name.includes("important")) {
mesh.parent = scene;
}
});The loader supports the full OBJ specification including:
Example OBJ usage patterns:
import "@babylonjs/loaders/OBJ";
import { SceneLoader } from "@babylonjs/core";
// Load OBJ with automatic MTL material loading
const result = await SceneLoader.ImportMeshAsync("", "/models/", "scene.obj", scene);
// Load specific objects by name
const result2 = await SceneLoader.ImportMeshAsync(
["Chair", "Table"],
"/models/",
"furniture.obj",
scene
);
// The loader automatically finds and loads associated .mtl files
// Files named "scene.mtl" or "furniture.mtl" will be loaded automatically