A Summary of Loading and Displaying Blender 3D Objects with Three.js

The purpose 

This post summarizes several articles on importing and displaying 3D objects created in Blender using Three.js.

(updated periodically)

Save　→　Load/display （Basic）

Export as glTF for loading and display in Three.js.

Save on Blender

How to export as a single file (.glb) 

Create glTF (.glb) files for free

The purpose create a glTF (.glb) file, as recommended by Microsoft and Three.js.How to load in Three.js is show...

blog.en.marunokan.com

2023.03.21

How to export as a split glTF file (.gltf) (.bin and texture files saved separately)

Saving textures as external files when saving glTF files(Blender)

The purpose When exporting from Blender in glTF 2.0, save textures as external files instead of embedding them in a...

blog.en.marunokan.com

2023.05.13

Load/display on Threejs

load and show glTF(.glb) file(Threejs)

The purpose simple way to load glTF (.glb) files into Three.js; these files are recommended by both Three.js and Mi...

blog.en.marunokan.com

2023.03.21

Loading and displaying a glTF (.gltf) file (Threejs)

The purpose Load a 3D model in Three.js, using the glTF (.gltf) file format, .bin files, and separate texture files...

blog.en.marunokan.com

2023.05.15

Handling compressed glTF

We can export in compressed glTF format with Blender, but Three.js-side support is also required. .gltf files are also readable with similar support.

Save compressed file

Reducing the file size of glTF (.glb) files for export(Blender)

The purpose As shown in the article below, you can save glTF (.glb) files in Blender, but the file size increases a...

blog.en.marunokan.com

2023.04.06

Load/display compressed file

Loading and displaying a compressed glTF (.glb) file(Threejs)

The purpose Loading a compressed glTF (.glb) file into Three.js.The compression method is as followsEnv...

blog.en.marunokan.com

2023.04.06

Troubleshooting issues when uploading to the web

DRACOLoader doesn't work when uploaded to the web (How to use DRACOLoader without WASM) (Threejs)

The purpose Troubleshooting steps for code that works locally but fails after being uploaded to a web server....

blog.en.marunokan.com

2023.04.08