Dev.to WebDev πŸ›  Dev πŸ‘ 0 πŸ“– 4 min read

COLLADA (DAE) to GLB for three.js: Fixing Units and Up-Axis Without Blender

COLLADA (.dae) was the exchange format of choice for SketchUp models, older Blender pipelines and many game tools. It is readable XML, which is nice, but web viewers and engines now expect glTF, and a DAE file brings a c

COLLADA (DAE) to GLB for three.js: Fixing Units and Up-Axis Without Blender

COLLADA (.dae) was the exchange format of choice for SketchUp models, older Blender pipelines and many game tools. It is readable XML, which is nice, but web viewers and engines now expect glTF, and a DAE file brings a classic trap with it: it declares its own unit and "up" axis, and not every importer honours them. A model drawn in centimetres with Z up can arrive 100 times too big and lying on its back.

If you build 3D pages with three.js or <model-viewer>, you have probably met this: a client or an old project hands you a .dae, and you want a single .glb you can drop into the page. This walkthrough converts a static DAE to GLB in the browser, without opening Blender, and is honest about what the route keeps. My sample is wall-shelf.dae, a small wall shelf I wrote for this post: a 60 Γ— 20 Γ— 2 cm oak board on two steel brackets, saved in centimetres (meter="0.01") with Z_UP, and two materials with plain colours.

What this route does

  • Applies units and axis for you. The declared meter scale and up axis are applied with the node transforms. The GLB is in metres and Y-up, as glTF defines.
  • Bakes the scene into one mesh. Triangles (and supported planar convex polylist faces) become one mesh with recomputed facet normals.
  • Keeps material colours. Materials bound to the geometry keep their name and diffuse colour as glTF materials.
  • Leaves out textures, UVs, names, the node hierarchy, cameras and lights. Referenced image files are never fetched.
  • Refuses instead of guessing. Animation, controllers (skins), external geometry and unsupported transforms or primitives stop the conversion with a message. Only static COLLADA 1.4.1 and 1.5.0 meshes are supported, and no model repair is performed.

So this is the right tool for static props and architectural pieces, not for rigged or animated characters.

Step 1: Open the DAE to GLB converter

Open the DAE to GLB converter on 3dconverter.org. The file is analysed in your browser and not sent to a server.

The DAE to GLB converter page before a file is chosen
The converter page: drop zone and the "Kept in the GLB / Left out" summary.

Step 2: Add the DAE file

Click Choose a DAE file or drop the file on the page. If you don't have a file handy, the page offers its own sample ("Park bench DAE").

wall-shelf.dae loaded, with the shelf shown in the preview
The shelf in the preview, already shown in metres and Y-up.

Step 3: Read the compatibility report (there are no settings)

This route has no settings to choose: units and axes are converted automatically. The report is the important part. It lists what the GLB can't carry, so you know before converting that textures and names won't come along.

The quality report with its note about what is omitted
The quality report: geometry and units preserved, and a note that textures, UVs, names, hierarchy, cameras and lights are omitted.

Step 4: Convert and check the size

Click convert. The GLB is reopened and compared with the source. For the shelf, the size should read about 0.60 Γ— 0.32 Γ— 0.20 m (X Γ— Y Γ— Z): 60 cm wide, 32 cm tall (brackets plus board, now on the Y axis) and 20 cm deep. That is the real shelf, not a 60-metre one, because the centimetre unit was applied.

The before-and-after report with triangle count and size in metres
Same triangle count (36), size in metres, and the Download GLB button.

Step 5: Download and inspect the GLB

Download the GLB and open it in a viewer. Check:

  1. Orientation: the shelf should stand upright, board on top.
  2. Size: measure the width (0.60 m here) against what you know about the object.
  3. Colours: the oak and steel colours should be there; image textures would not be.
  4. Structure: expect one mesh. If you need separate, named parts, this route isn't the right one; re-export them from your modelling tool instead.

The converted wall-shelf.glb opened in a 3D viewer
The GLB in a viewer: upright, metre scale, two material colours.

Bonus: load it in three.js

Because the GLB is already in metres and Y-up, it needs no rotation or scale fix in code. A minimal load with three.js's GLTFLoader looks like this:

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

new GLTFLoader().load('wall-shelf.glb', (gltf) => {
  scene.add(gltf.scene); // no rotation.x = -Math.PI / 2, no scale(0.01) needed
});

Common questions

My DAE has an animation. Why did it stop? The route refuses animation, controllers and skins rather than silently dropping them. Export a static version, or use a pipeline built for animated assets.

Where did my textures go? Textures and UVs are not carried over on this route. Keep the DAE and the images as your source, and re-apply textures in an authoring tool if the GLB needs them.

Why convert at all if things are dropped? For a static prop, the GLB gives you one file at the right size and orientation that any glTF viewer can load, which is usually what a web page needs.

Recap: open the converter β†’ add the DAE β†’ read the compatibility report β†’ convert and check the size in metres β†’ download and inspect orientation, size and colours.

Disclosure: I make 3D Converter, the browser tool used in this walkthrough.

πŸ“° Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes β€” full credit and traffic to the original publisher.