Skip to main content

​
Overview

The FBX loader enables you to load 3D models in Autodesk’s FBX format. FBX is widely supported by 3D modeling software and supports animations, skeletal rigging, and complex material properties.

​
Usage

tb.loadObj({
  type: 'fbx',
  obj: 'https://example.com/model.fbx',
  units: 'meters',
  scale: 0.01,
  rotation: { x: 90, y: 0, z: 0 },
  anchor: 'center'
}, function(model) {
  tb.add(model);
});

​
Parameters

​
type
string
required
Loader type. Must be 'fbx' for FBX files.
​
obj
string
required
URL or path to the FBX model file.
​
units
string
default:"scene"
Units for the model scale. Options:
  • 'scene' - Scene units (default)
  • 'meters' - Meters
​
scale
number | array
default:"1"
Scale factor for the model. FBX models are often exported in centimeters, so you may need to scale down (e.g., 0.01).Can be:
  • A single number: 0.01 (uniform scale)
  • An array: [x, y, z] for per-axis scaling
Example: scale: [0.01, 0.01, 0.01] or scale: 0.01
​
rotation
number | object | array
default:"0"
Rotation for the model in degrees. Can be:
  • A single number: 90 (rotation around Y axis)
  • An object: { x: 90, y: 0, z: 0 }
  • An array: [90, 0, 0] (X, Y, Z rotation)
Note: FBX models often need a 90-degree X rotation to align with Mapbox’s coordinate system.
​
anchor
string
default:"bottom-left"
Anchor point for the model positioning. Options:
  • 'center' - Center of the model
  • 'bottom-left' - Bottom-left corner
  • 'bottom-right' - Bottom-right corner
  • 'top-left' - Top-left corner
  • 'top-right' - Top-right corner
  • 'bottom-center' - Bottom center
  • 'top-center' - Top center
  • 'left' - Left center
  • 'right' - Right center
​
adjustment
object
Manual adjustment to override the automatic center calculation.Example: { x: 0, y: 0, z: 0 }
​
normalize
boolean
default:"false"
Normalize specular, metalness, and shininess properties for better rendering in Mapbox.FBX models often have high specular values that require many lights. Setting this to true reduces these values for better appearance.
​
defaultAnimation
number
default:"0"
Index of the default animation to play from the model’s animation array.
​
raycasted
boolean
default:"true"
Whether the model should be included in raycasting for mouse interactions.
​
bbox
boolean
default:"true"
Whether to calculate and display a bounding box for the model.
​
tooltip
boolean
default:"true"
Whether to enable tooltips for the model.
​
clone
boolean
default:"true"
Whether to clone the model when adding multiple instances.
​
withCredentials
boolean
default:"false"
Whether to send cookies and authorization headers with cross-origin requests.

​
Callback

The callback function receives the loaded model object with the following properties: 
function(model) {
  // Model object with added methods
  model.setCoords([lng, lat]); // Position on map
  model.setRotation({ x: 0, y: 90, z: 0 }); // Rotate model
  model.setScale(2); // Scale model
  
  // Access animations
  console.log(model.animations); // Array of animations
  
  // Access the internal THREE.js model
  console.log(model.model); // THREE.Object3D
}

​
Model Structure

FBX models are loaded with the following structure:
  • The root FBX object is used directly
  • animations array is preserved and accessible via model.animations
  • All child meshes, materials, and bones are included
  • Skeletal animations and morph targets are supported
From /home/daytona/workspace/source/src/objects/loadObj.js:77-79: 
case "fbx":
  animations = obj.animations;
  break;

​
Normalization

FBX models exported from software like Maya or 3ds Max often have very high specular and metalness values. Use the normalize option to reduce these: 
tb.loadObj({
  type: 'fbx',
  obj: 'model.fbx',
  normalize: true // Reduces metalness and specular
}, callback);
This reduces:
  • Metalness by 90% (multiply by 0.1)
  • Glossiness by 75% (multiply by 0.25)
  • Sets specular color to (12, 12, 12) for MeshStandardMaterial
  • Sets shininess to 0.1 for MeshPhongMaterial

​
Common Scale Issues

FBX files are often exported in centimeters, while Threebox uses meters. If your model appears too large or too small: 
// Model too large? Scale down
tb.loadObj({
  type: 'fbx',
  obj: 'model.fbx',
  scale: 0.01 // Convert from cm to m
}, callback);

// Model too small? Scale up
tb.loadObj({
  type: 'fbx',
  obj: 'model.fbx',
  scale: 100 // Convert from m to cm units
}, callback);

​
Examples

​
Basic FBX Model

tb.loadObj({
  type: 'fbx',
  obj: 'https://example.com/building.fbx',
  scale: 0.01, // FBX often in centimeters
  rotation: { x: 90, y: 0, z: 0 }, // Align with ground
  anchor: 'center',
  normalize: true
}, function(model) {
  model.setCoords([-122.4194, 37.7749]);
  tb.add(model);
});

​
FBX with Animation

tb.loadObj({
  type: 'fbx',
  obj: 'https://example.com/character.fbx',
  scale: 0.01,
  rotation: { x: 90, y: 0, z: 0 },
  defaultAnimation: 0,
  normalize: true
}, function(model) {
  model.setCoords([-122.4194, 37.7749]);
  tb.add(model);
  
  // Play walk animation
  if (model.animations && model.animations.length > 0) {
    model.playAnimation({ 
      animation: 0, 
      duration: 2000,
      loop: true 
    });
  }
});

​
Animated Vehicle

tb.loadObj({
  type: 'fbx',
  obj: 'https://example.com/car.fbx',
  scale: 0.01,
  rotation: { x: 90, y: 180, z: 0 },
  anchor: 'bottom-center',
  normalize: true
}, function(model) {
  model.setCoords([-122.4194, 37.7749]);
  tb.add(model);
  
  // Rotate wheels animation
  model.playAnimation({ animation: 0 });
  
  // Move along route
  model.followPath({
    path: route,
    duration: 5000
  });
});

Build docs developers (and LLMs) love

Get started for freeTalk to us