
Any scene or mesh can be downloaded as a file to your computer. This is achieved with the [scene serializer](/typedoc/classes/babylon.sceneserializer)

## Scene

Include the following code in your project to download your scene

```javascript
let objectUrl;
function doDownload(filename, scene) {
  if (objectUrl) {
    window.URL.revokeObjectURL(objectUrl);
  }

  const serializedScene = BABYLON.SceneSerializer.Serialize(scene);

  const strScene = JSON.stringify(serializedScene);

  if (filename.toLowerCase().lastIndexOf(".babylon") !== filename.length - 8 || filename.length < 9) {
    filename += ".babylon";
  }

  const blob = new Blob([strScene], { type: "octet/stream" });

  BABYLON.Tools.Download(blob, filename);
}
```

The following playground shows how to create a scene, use the serializer, convert it to a JSON file, and then offer it for download to your computer.  
PG: <Playground id="#1AGCWP#1" title="Save Scene" description="Example of saving a scene." image="/img/playgroundsAndNMEs/pg-1AGCWP-1.webp"/>

## Meshes

The following code shows the changes needed to download only a mesh to your computer.

```javascript
let objectUrl;
function doDownload(filename, mesh) {
  if (objectUrl) {
    window.URL.revokeObjectURL(objectUrl);
  }

  const serializedMesh = BABYLON.SceneSerializer.SerializeMesh(mesh);

  const strMesh = JSON.stringify(serializedMesh);

  if (filename.toLowerCase().lastIndexOf(".babylon") !== filename.length - 8 || filename.length < 9) {
    filename += ".babylon";
  }

  const blob = new Blob([strMesh], { type: "octet/stream" });

  BABYLON.Tools.Download(blob, filename);
}
```


# Exporting to 3MF

## What is 3MF?

3MF (3D Manufacturing Format) is an open, XML-based file format designed for additive manufacturing and 3D printing workflows. Unlike formats such as STL, 3MF is a versatile container that carries geometry, units, materials, colors, metadata, and structural relationships in a single zip-based package (OPC — Open Packaging Conventions). It is natively supported by most modern slicers, CAD tools, and manufacturing pipelines.

Because 3MF is designed to faithfully represent manufacturing intent, a Babylon.js scene may need to be prepared before exporting. For example, you may want to apply world transforms, merge or split meshes by material, assign meaningful names, set a specific unit, or strip rendering-only data that has no manufacturing meaning. The exporter works directly on the meshes you pass to it, so you remain in full control of what goes into the file.

---

## Installation and prerequisites

The serializer relies on [fflate](https://github.com/101arrowz/fflate) for zip compression. By default it loads fflate lazily from a CDN:

```typescript
// Override the CDN URL before creating any serializer instance (optional)
import { ThreeMfSerializerGlobalConfiguration } from "babylonjs-serializers";
ThreeMfSerializerGlobalConfiguration.FFLATEUrl = "https://cdn.example.com/fflate.js";
```

If fflate is already present on `globalThis.fflate` (bundled by your application), the dynamic load is skipped automatically.

---

## Basic usage

### Serialize to a memory buffer

The simplest way to export one or more meshes is `ThreeMf.SerializeToMemoryAsync`. It buffers the entire 3MF archive into a `Uint8Array` that you can then save or upload.

```typescript
import { ThreeMfSerializer, ThreeMf } from "babylonjs-serializers";

const serializer = new ThreeMfSerializer();

const buffer = await ThreeMf.SerializeToMemoryAsync(serializer, mesh1, mesh2);

if (buffer) {
    // Save as a file in the browser
    const blob = new Blob([buffer], { type: "application/octet-stream" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = "model.3mf";
    a.click();
    URL.revokeObjectURL(url);
}
```

### Stream to a custom sink

For large scenes or environments where you want to avoid buffering the entire archive in memory (e.g., writing directly to a Node.js file stream), use `serializeAsync` with a sink callback:

```typescript
import { ThreeMfSerializer } from "babylonjs-serializers";
import { createWriteStream } from "fs";

const serializer = new ThreeMfSerializer({ unit: ST_Unit.millimeter });
const chunks: Uint8Array[] = [];

await serializer.serializeAsync(
    (err, chunk, final) => {
        // append chunk to your stream / buffer
        chunks.push(chunk);
    },
    mesh1,
    mesh2
);
```

---

## Serializer options

Options are passed as an object to the `ThreeMfSerializer` constructor. All fields are optional.

| Option | Type | Default | Description |
|---|---|---|---|
| `unit` | `ST_Unit` | `ST_Unit.meter` | Unit used for all coordinates in the exported file. Must match the scale of your scene. |
| `exportInstances` | `boolean` | `false` | When `true`, `InstancedMesh` objects are exported as additional build items that reference the shared geometry of their source mesh — no geometry duplication. When `false`, instances are silently ignored. |
| `metadata` | `Record<string, string>` | `undefined` | Arbitrary key/value pairs written as model-level metadata. Standard keys include `Title`, `Designer`, `Description`, `Copyright`, `LicenseTerms`, `CreationDate`, `ModificationDate`, and `Application`. |

### Units

The `ST_Unit` enum provides the full set of units supported by the 3MF specification:

```typescript
import { ST_Unit } from "babylonjs-serializers";

// Available values
ST_Unit.micron
ST_Unit.millimeter  // most common for desktop 3D printing
ST_Unit.centimeter
ST_Unit.inch
ST_Unit.foot
ST_Unit.meter       // default for ThreeMfSerializer
```

> **Important:** The unit does not rescale coordinates. It declares to the consuming application how to interpret the raw numbers in the file. Make sure the unit you choose matches the actual scale of your mesh vertices.

### Example: millimeter export with metadata

```typescript
import { ThreeMfSerializer, ST_Unit, ThreeMf } from "babylonjs-serializers";

const serializer = new ThreeMfSerializer({
    unit: ST_Unit.millimeter,
    metadata: {
        Title: "My Part",
        Designer: "Jane Doe",
        Description: "Bracket assembly for prototype v2",
        CreationDate: new Date().toISOString().slice(0, 10),
    },
});

const buffer = await ThreeMf.SerializeToMemoryAsync(serializer, bracket);
```

### Example: exporting instances

When a scene contains many copies of the same object created with `Mesh.createInstance()`, enabling `exportInstances` avoids duplicating geometry for every copy:

```typescript
const serializer = new ThreeMfSerializer({ exportInstances: true });

// sourceMesh is exported once as a resource object.
// each InstancedMesh becomes a separate build item pointing to that object.
const buffer = await ThreeMf.SerializeToMemoryAsync(serializer, sourceMesh, ...sourceMesh.instances);
```

---

## Preparing your scene for export

Because 3MF targets manufacturing workflows, some aspects of a typical Babylon.js scene may need attention before exporting:

- **Apply transforms:** The serializer uses each mesh's current world matrix. If you want a "baked" export with no runtime transform, call `mesh.bakeCurrentTransformIntoVertices()` beforehand.
- **Units and scale:** If your scene is in centimeters but the slicer expects millimeters, either rescale the meshes or choose `ST_Unit.centimeter` so the consumer can convert correctly.
- **Submeshes and materials:** Each Babylon.js `SubMesh` is exported as its own 3MF object resource. This allows downstream tools to assign per-object colors or materials. If you want a single object per mesh, merge submeshes before exporting.
- **Names:** Object names in the exported file come from `mesh.name`. Give meshes meaningful names to make the 3MF easier to work with in slicer or CAD software.
- **Non-manifold geometry:** 3MF consumers typically require watertight (manifold) geometry for printing. Validate and repair meshes as needed before export.

---

## Advanced: using the builders directly

The serializer internally uses a set of fluent builder classes. You can use these directly if you need to construct a 3MF file from raw geometry data (independent of any Babylon.js mesh):

```typescript
import {
    ThreeMfModelBuilder,
    ThreeMfMeshBuilder,
    ThreeMfMaterialBuilder,
    ThreeMfDocumentBuilder,
    ST_Unit,
} from "babylonjs-serializers";

// 1. Define a material group
const material = new ThreeMfMaterialBuilder(1)
    .withColor("Red", { r: 0.8, g: 0.1, b: 0.1 })
    .withColor("Blue", { r: 0.1, g: 0.1, b: 0.8 })
    .build();

// 2. Define a mesh resource (positions: flat x,y,z array; indices: flat i,j,k array)
const mesh = new ThreeMfMeshBuilder(2)
    .withName("Cube")
    .withData({ positions: [...], indices: [...] })
    .withMaterial(1, 0) // reference material group id=1, entry index 0
    .build();

// 3. Assemble the model
const model = new ThreeMfModelBuilder()
    .withUnit(ST_Unit.millimeter)
    .withMetaData("Title", "My Model")
    .withMaterial(material)
    .withMesh(mesh)
    .withBuild(2) // add mesh id=2 to the build list
    .build();

// 4. Wrap in an OPC document
const document = new ThreeMfDocumentBuilder()
    .withModel(model)
    .build();
```

### Builder reference

| Builder | Purpose |
|---|---|
| `ThreeMfModelBuilder` | Assembles the root 3MF model: unit, metadata, resources (meshes + materials), and build items. |
| `ThreeMfMeshBuilder` | Creates a mesh resource object from a flat positions array and a flat indices array. Accepts an optional vertex/triangle post-process handler. |
| `ThreeMfMaterialBuilder` | Creates a `basematerials` resource group. Colors are expressed as linear RGB and converted to sRGB hex automatically. |
| `ThreeMfComponentsBuilder` | Creates a composite object made of references to other resource objects with per-component transforms. |
| `ThreeMfDocumentBuilder` | Wraps a model into a full OPC document (content types + relationships + model part). |

### `ThreeMfMeshBuilder` post-process handlers

If you need to transform individual vertices or triangles during export (e.g., to remap coordinates or inject per-triangle property references), you can attach handlers:

```typescript
const mesh = new ThreeMfMeshBuilder(id)
    .withData(data)
    .withPostProcessHandlers(
        (vertex) => {
            // transform or annotate the vertex
            return vertex;
        },
        (triangle) => {
            // assign per-triangle material references
            triangle.pid = materialGroupId;
            triangle.p1 = 0;
            return triangle;
        }
    )
    .build();
```



Interested in getting Adobe Mixamo characters into Babylon.js? Mixamo uses .fbx files, so you'll have to go through either .glb or .babylon files to load your animated characters in Babylon.js.

- For the .glb route, go to this page: [Animating Characters](https://doc.babylonjs.com/features/featuresDeepDive/animation/animatedCharacter)
- For the .babylon route, which uses the Blender To Babylon Exporter, use this page. Follow the guide below!

Start by downloading and installing the [Blender to Babylon.js exporter](https://github.com/BabylonJS/BlenderExporter). Here are the [Installation instructions](/features/featuresDeepDive/Exporters/Blender#installation).

From [Mixamo](https://www.mixamo.com), under Characters, select Y Bot. Download Y Bot with the following settings:

![image1](/img/exporters/mixamo/1.webp)

Rename this file to ybot.fbx

In Mixamo, under Animations, choose the animations that you want to export (for this guide I chose punch and kick). Download the animations with the following settings:

![image2](/img/exporters/mixamo/2.webp)

Rename these files to ybot@animation.fbx, e.g. ybot@punch.fbx and ybot@kick.fbx.

Open a new Blender 2.8+ scene, and delete all 3 default objects (cube, camera, and light).

In the Blender top menu, click File → Import → FBX (.fbx). In Operator Presets on the right, check Manual Orientation and Automatic Bone Orientation. Select ybot.fbx and then click Import FBX.

![image3](/img/exporters/mixamo/3.webp)

Import ybot@punch.fbx and ybot@kick.fbx into Blender the same way you did ybot.fbx.

![image4](/img/exporters/mixamo/4.webp)

Rename Armature to Character and rename all animations, as shown in the image below (bordered in red):

![image5](/img/exporters/mixamo/5.webp)

Delete Armature.001 and Armature.002.

As shown in the image below (bordered in red), select Character (top right), click in the center of the circle (bottom right), and drag up to create a new sub-window. Select Dope Sheet (bottom left) and Action Editor (next to it), then select an animation (middle), for example Kick. Click Play (bottom middle) to play the animation. If your character is not animating, make sure you selected Character (top right, bordered in red). Also, make sure you're in Object Mode.

![image6](/img/exporters/mixamo/6a.webp)

Change animation back to TPose from Kick. In Blender, press N, which opens the Transform tab. Note that Rotation is not all 0° and Scale is 0.010 instead of 1.

![image7](/img/exporters/mixamo/7a.webp)

As shown in the image below (bordered red), in Object Mode, press A to select all. Press S to scale. Type 100 to scale from 0.010 to 1.

![image8](/img/exporters/mixamo/8.webp)

As shown in the image below (bordered red), press Ctrl + A to open the Apply menu. Click All Transforms. Location should all be set to 0, Rotation should all be set to 0, and Scale should all be set to 1.

![image9](/img/exporters/mixamo/9.webp)

[Possibly useful resource](https://blender.stackexchange.com/questions/24839/how-do-i-resize-an-armature-without-ruining-its-poses)

We need to change the two materials, as shown in the image below. Something in them is incompatible with the .babylon format.

![image10](/img/exporters/mixamo/10.webp)

Click Alpha_Joints_MAT. As shown in the image below (bordered red), click Material Properties (bottom most), Browse Materials (slightly above), and select Material (slightly above). Do the same for Alpha_Body_MAT.

![image11](/img/exporters/mixamo/11.webp)

You should be able to add custom colors and other material properties to Material.

In Blender top menu, click File → Export → Babylon.js ver 6.2.3. Click Export Babylon.js scene.

![image11b](/img/exporters/mixamo/11b.webp)

Open your .babylon file in Notepad. Scroll to bottom, and paste the following text:

```
"autoAnimate": true,"autoAnimateFrom": 1,"autoAnimateTo": 152,"autoAnimateLoop": true,
```

before "instances":[]. Save your .babylon file.

![image12](/img/exporters/mixamo/12.webp)

Go to [Babylon.js Sandbox](https://sandbox.babylonjs.com/). Drag your .babylon file into the browser.

autoAnimate lets your model animate automatically when dragged into the Babylon.js Sandbox. Why autoAnimateTo frame 152? According to the Sandbox animation list and the image of the .babylon file below, all 3 animations (Kick, Punch, and TPose) take a total of 152 frames.

![image12a](/img/exporters/mixamo/12a.webp)

So how do you trigger these animations in Babylon.js code? Check out PG: <Playground id="#BCU1XR#0" title="Animation Blending" description="Triggering Mixamo animations." isMain={true} category="Animation"/>

![image12c](/img/exporters/mixamo/12c.webp)

Click the image below to see the final result!

[![finalVideo](https://img.youtube.com/vi/_f4z--WKsU4/0.jpg)](https://www.youtube.com/watch?v=_f4z--WKsU4)

Check out this Babylon.js Demo: [Dancers](https://www.babylonjs.com/Demos/Dancers/). In this demo, a .babylon model of the dancer is loaded just once! Its mesh and skeleton are cloned many times. The dance animation can be applied to each cloned skeleton separately whenever we choose!

All .fbx, .blend, and .babylon files are included in files/.


Save Your Scene or Meshes

Scene

Meshes