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

Table of contents

The purpose

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

Instructions on how to save the model in Blender are available on this page:

Threejs：　r150

Chrome：　111.0.5563.65

Loading and displaying can be done with the same code as for .glb files.

loadObjects(scene,"./dice.glb");

The specified input file mentioned above will be changed to the designated .gltf file.

The .bin file and texture files, which are created simultaneously when saving the .gltf file, do not need to be specified in the source code.

When saving a .gltf file in Blender, the .bin file and texture files are saved in the same folder. All saved files need to be uploaded to the server.

Pay particular attention to the texture files, as they are easily overlooked; they are saved in the same folder as the original .blend file.