Load and display a glTF (.glb) file using Threejs.

Things I want to do
Environment
Prepare
1. Make it possible to load modules.
2. How to create a glTF file
Loading using GLTFLoader
Websites I used as references
Related pages

Things I want to do

I want to easily load glTF (.glb) files, which are recommended by Threejs and Microsoft, into Threejs.

Environment

Threejs：　r150

Chrome：　111.0.5563.65

Prepare

Make it possible to load modules.

Type uses the module’s JavaScript. For local use, Chrome needs to be launched in a special way; a standard Chrome instance cannot load the module’s JavaScript.

Add the following argument when launching Chrome:

 --allow-file-access-from-files

It’s convenient to either create a Chrome shortcut and add the above arguments to the end of the link, or create a batch file.

When launching Chrome using the method described above, you must have all Chrome windows closed.

How to create a glTF file

Loading using GLTFLoader

Folder structure

The folder structure is as follows:

dice.glb is the file to be loaded.

GLTFLoader.js, three.module.js, and BufferGeometryUtils.js are files included in Threejs.

ROOT
|   dice.glb
|   index.html
|
\---js
    +---libs
    | 3d.js
    | GLTFLoader.js //Original file (three.js\examples\jsm\loaders\GLTFLoader.js)
    | run.module.js //Original file (three.js\build\three.module.js)
    |
    \---utils
            BufferGeometryUtils.js // Original file (three.js\examples\jsm\utils\BufferGeometryUtils.js)

HTML

The index.html file for the folder structure should be written as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

</head>
<body>
    <canvas id="canvas1" width=600 height=600></canvas>
    <script type="importmap">{"imports": {"three": "./js/libs/three.module.js"}}</script>
    <script type="module" src="./js/libs/3d.js"></script>
</body>
</html>

The following is an explanation for each line.

<canvas id="canvas1" width=600 height=600></canvas>

This is a canvas for displaying 3D objects. Since it will be used from JavaScript, we will set an ID.

 <script type="importmap">{"imports": {"three": "./js/libs/three.module.js"}}</script>

Specify the location of slip.module.js.

I struggled quite a bit with this setting.

<script type="module" src="./js/libs/3d.js"></script>

This loads the JavaScript code that includes the loading process.

The latest version of GLTFLoader, which reads glb files, appears to only include the module version. Other websites may list information on the non-module version, which may not work correctly.

JavaScript

import * as THREE from 'three';
import { GLTFLoader } from './GLTFLoader.js';

let renderer;
let scene;
let camera;

scene = new THREE.Scene();
const canvas = document.querySelector("#canvas1");
renderer = new THREE.WebGLRenderer({ canvas: canvas});

const width = canvas.width;
const height = canvas.height;
renderer.setSize(width, height);

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

function setupCamera() {
	const canvas = document.querySelector("#canvas1");
	const width = canvas.width;
	const height = canvas.height;

	camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 3000);
	camera.position.set(4, 4, 4); 
	camera.lookAt(new THREE.Vector3(0, 0, 0));
}

function render() {
	renderer.render(scene, camera);
}

function setupLights(scene) {
	let ambientLight = new THREE.AmbientLight(0xffffff);
	ambientLight.intensity = 1;
	scene.add(ambientLight);
}

function loadObjects(scene, path) {
	const loader = new GLTFLoader();
	loader.load(path, function(gltf) {
		let box = gltf.scene;
		scene.add(box);
		requestAnimationFrame(render);
	}, undefined, function(e) {
		console.error(e);
	});
}

The process for loading the .glb file is as follows. Other processes are standard Threejs image display processes.

import { GLTFLoader } from './GLTFLoader.js';

Import a Loader to read .glb files.

function loadObjects(scene, path) {
	const loader = new GLTFLoader();
	loader.load(path, function(gltf) {
		let box = gltf.scene;
		scene.add(box);
		requestAnimationFrame(render);
	}, undefined, function(e) {
		console.error(e);
	});
}

The `path` parameter should contain the path to the .glb file to be loaded. If you are using a relative path, set it relative to the HTML file.

The function in the second argument of loader.load is called when loading is complete. Here, the gltf.scene of the loaded gltf is added to the scene using add(). After adding, rendering is requested using requestAnimationFrame() to display it on the screen.

`gltf.scene` is a group, not a Threejs scene. It cannot be rendered directly.

Result

I was able to load and display dice.glb.

Websites I used as references

Three.js – JavaScript 3D Library

A summary of how to load and display 3D objects created in Blender using Threejs.