<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Jeremy Xiao</title>
    <description>The latest articles on DEV Community by Jeremy Xiao (@jeremyxiao3d).</description>
    <link>https://dev.to/jeremyxiao3d</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4207569%2Fc3b96652-95d9-49ad-928c-6fe90a799d5c.png</url>
      <title>DEV Community: Jeremy Xiao</title>
      <link>https://dev.to/jeremyxiao3d</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jeremyxiao3d"/>
    <language>en</language>
    <item>
      <title>COLLADA (DAE) to GLB for three.js: Fixing Units and Up-Axis Without Blender</title>
      <dc:creator>Jeremy Xiao</dc:creator>
      <pubDate>Mon, 02 Nov 2026 06:36:04 +0000</pubDate>
      <link>https://dev.to/jeremyxiao3d/collada-dae-to-glb-for-threejs-fixing-units-and-up-axis-without-blender-4gc7</link>
      <guid>https://dev.to/jeremyxiao3d/collada-dae-to-glb-for-threejs-fixing-units-and-up-axis-without-blender-4gc7</guid>
      <description>&lt;p&gt;COLLADA (&lt;code&gt;.dae&lt;/code&gt;) 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.&lt;/p&gt;

&lt;p&gt;If you build 3D pages with three.js or &lt;code&gt;&amp;lt;model-viewer&amp;gt;&lt;/code&gt;, you have probably met this: a client or an old project hands you a &lt;code&gt;.dae&lt;/code&gt;, and you want a single &lt;code&gt;.glb&lt;/code&gt; 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 &lt;code&gt;wall-shelf.dae&lt;/code&gt;, a small wall shelf I wrote for this post: a 60 × 20 × 2 cm oak board on two steel brackets, saved in &lt;strong&gt;centimetres&lt;/strong&gt; (&lt;code&gt;meter="0.01"&lt;/code&gt;) with &lt;strong&gt;Z_UP&lt;/strong&gt;, and two materials with plain colours.&lt;/p&gt;

&lt;h2&gt;
  
  
  What this route does
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Applies units and axis for you.&lt;/strong&gt; The declared meter scale and up axis are applied with the node transforms. The GLB is in metres and Y-up, as glTF defines.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Bakes the scene into one mesh.&lt;/strong&gt; Triangles (and supported planar convex polylist faces) become one mesh with recomputed facet normals.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Keeps material colours.&lt;/strong&gt; Materials bound to the geometry keep their name and diffuse colour as glTF materials.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Leaves out&lt;/strong&gt; textures, UVs, names, the node hierarchy, cameras and lights. Referenced image files are never fetched.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Refuses instead of guessing.&lt;/strong&gt; 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.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So this is the right tool for static props and architectural pieces, not for rigged or animated characters.&lt;/p&gt;

&lt;h2&gt;
  
  
  Step 1: Open the DAE to GLB converter
&lt;/h2&gt;

&lt;p&gt;Open the &lt;a href="https://3dconverter.org/convert/dae-to-glb" rel="noopener noreferrer"&gt;DAE to GLB converter on 3dconverter.org&lt;/a&gt;. The file is analysed in your browser and not sent to a server.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxrmqc6djveu9ue6diwwq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fxrmqc6djveu9ue6diwwq.png" alt="The DAE to GLB converter page before a file is chosen" width="800" height="483"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;The converter page: drop zone and the "Kept in the GLB / Left out" summary.&lt;/em&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Step 2: Add the DAE file
&lt;/h2&gt;

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

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fbm7k9m0y75mjubf1yjqu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fbm7k9m0y75mjubf1yjqu.png" alt="wall-shelf.dae loaded, with the shelf shown in the preview" width="800" height="483"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;The shelf in the preview, already shown in metres and Y-up.&lt;/em&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Step 3: Read the compatibility report (there are no settings)
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fcwhadmgyscbx2op36dyp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fcwhadmgyscbx2op36dyp.png" alt="The quality report with its note about what is omitted" width="800" height="483"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;The quality report: geometry and units preserved, and a note that textures, UVs, names, hierarchy, cameras and lights are omitted.&lt;/em&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Step 4: Convert and check the size
&lt;/h2&gt;

&lt;p&gt;Click convert. The GLB is reopened and compared with the source. For the shelf, the size should read about &lt;strong&gt;0.60 × 0.32 × 0.20 m&lt;/strong&gt; (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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffabzr9q4bcs5b4gdmm7u.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffabzr9q4bcs5b4gdmm7u.png" alt="The before-and-after report with triangle count and size in metres" width="800" height="483"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Same triangle count (36), size in metres, and the Download GLB button.&lt;/em&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Step 5: Download and inspect the GLB
&lt;/h2&gt;

&lt;p&gt;Download the GLB and open it in a viewer. Check:&lt;/p&gt;

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

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpy5svbt5hzufbqkpya2h.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpy5svbt5hzufbqkpya2h.png" alt="The converted wall-shelf.glb opened in a 3D viewer" width="800" height="483"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;The GLB in a viewer: upright, metre scale, two material colours.&lt;/em&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Bonus: load it in three.js
&lt;/h2&gt;

&lt;p&gt;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 &lt;code&gt;GLTFLoader&lt;/code&gt; looks like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;GLTFLoader&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;three/addons/loaders/GLTFLoader.js&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;GLTFLoader&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;load&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;wall-shelf.glb&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;gltf&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;scene&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;gltf&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;scene&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// no rotation.x = -Math.PI / 2, no scale(0.01) needed&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Common questions
&lt;/h2&gt;

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

&lt;p&gt;&lt;strong&gt;Where did my textures go?&lt;/strong&gt; 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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why convert at all if things are dropped?&lt;/strong&gt; 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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Recap:&lt;/strong&gt; open the converter → add the DAE → read the compatibility report → convert and check the size in metres → download and inspect orientation, size and colours.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Disclosure: I make 3D Converter, the browser tool used in this walkthrough.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>threejs</category>
      <category>3d</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
