or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

bvh-loading.mdgltf-loading.mdindex.mdobj-loading.mdsplat-loading.mdstl-loading.md
tile.json

obj-loading.mddocs/

OBJ Loading

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.

Capabilities

OBJFileLoader Class

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);

OBJLoadingOptions Type

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;
};

MTLFileLoader Class

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}`);
});

SolidParser Class

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;
}

Advanced Configuration

Geometry Processing Options

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;

Coordinate System Handling

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;

Material Loading Configuration

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;

Asset Container Loading

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;
  }
});

OBJ File Format Support

The loader supports the full OBJ specification including:

  • Vertex Data: Positions (v), texture coordinates (vt), normals (vn)
  • Face Definitions: Triangles and quads with vertex/texture/normal indices
  • Object Groups: Multiple objects in single file (o, g)
  • Material References: Material library files (mtllib, usemtl)
  • Smooth Shading: Smooth shading groups (s)
  • Line Elements: Polylines and curves (l)
  • Comments: Comment lines (#)

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