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

Table of contents

The purpose
Environment
Prepare
Load with DRACOLoader
Reference
Related page

The purpose

Loading a compressed glTF (.glb) file into Three.js.

The compression method is as follows

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...

Environment

Threejs：　r150

Chrome：　111.0.5563.65

Prepare

For instructions on preparing the uncompressed source and environment, please refer to the article below.

Load with DRACOLoader

Folder structure

The folder structure is as follows: dice-c.glb is the compressed glTF file to be loaded.

The DRACOLoader.js file and the draco folder have been added; both are included with Three.js.

ROOT
|   dice-c.glb
|   index.html
|
\---js
    +---libs
    |   |   3d.js
    |   |   DRACOLoader.js　　　　///add original file　(three.js\examples\jsm\loaders¥DRACOLoader.js)
    |   |   GLTFLoader.js　//original file　(three.js\examples\jsm\loaders¥GLTFLoader.js)
    |   |   three.module.js　//original file　(three.js\build\three.module.js)
    |   |
    |   \---draco　　　　　　　　　///add　original file　(threejs\three.js\examples\jsm\libs\draco)
    |       |   draco_decoder.js
    |       |   draco_decoder.wasm
    |       |   draco_encoder.js
    |       |   draco_wasm_wrapper.js
    |       |   README.md
    |       |
    |       \---gltf
    |               draco_decoder.js
    |               draco_decoder.wasm
    |               draco_encoder.js
    |               draco_wasm_wrapper.js
    |
    \---utils
            BufferGeometryUtils.js　//original file　(three.js\examples\jsm\utils¥BufferGeometryUtils.js)

HTML

The index.html file within the folder structure is written as follows.

No changes have been made since the last iteration.

<!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>

JavaScript

contents of 3d.js is below.

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

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-c.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();
///add start
	const dracoLoader = new DRACOLoader();
	dracoLoader.setDecoderPath('./js/libs/draco/');
	loader.setDRACOLoader(dracoLoader);

///add end

	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 compressed .glb file is as follows. Other parts remain the same as before.

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

Import the loader for loading compressed .glb files.

	const dracoLoader = new DRACOLoader();
	dracoLoader.setDecoderPath('./js/libs/draco/');
	loader.setDRACOLoader(dracoLoader);

A DRACOLoader is created and set to the GLTFLoader.

The path specified by setDecoderPath is the path from the HTML file to the draco folder.

Result

We are able to load and display the compressed dice-c.glb file.

Error message

Loading an unhandled compressed glTF file results in the following error log.

3d.js:47 Error: THREE.GLTFLoader: No DRACOLoader instance provided.
    at new GLTFDracoMeshCompressionExtension (GLTFLoader.js:1730:10)
    at GLTFLoader.parse (GLTFLoader.js:380:37)
    at Object.onLoad (GLTFLoader.js:218:11)
    at three.module.js:40715:38

If the argument './js/libs/draco/' in dracoLoader.setDecoderPath('./js/libs/draco/') is incorrect, the following error will be logged.

xxxxxxxxxxxxxxxxx varies depending on the environment.

three.module.js:40577          GET file:///ｘｘｘｘｘｘｘｘｘｘｘｘｘｘ/js/libs/draco/draco_wasm_wrapper.js net::ERR_FILE_NOT_FOUND
three.module.js:40577          GET file:///ｘｘｘｘｘｘｘｘｘｘｘｘｘｘ/js/libs/draco/draco_decoder.wasm net::ERR_FILE_NOT_FOUND
3three.module.js:40577          Uncaught (in promise) TypeError: Failed to fetch
    at FileLoader.load (three.module.js:40577:3)
    at DRACOLoader.js:251:11
    at new Promise (<anonymous>)
    at DRACOLoader._loadLibrary (DRACOLoader.js:249:10)
    at DRACOLoader._initDecoder (DRACOLoader.js:278:32)
    at DRACOLoader.preload (DRACOLoader.js:259:8)
    at new GLTFDracoMeshCompressionExtension (GLTFLoader.js:1737:20)
    at GLTFLoader.parse (GLTFLoader.js:380:37)
    at Object.onLoad (GLTFLoader.js:218:11)
    at three.module.js:40715:38

Reference

Three.js – JavaScript 3D Library

Blenderで作成した3DオブジェクトをThreejsで読込、表示するまとめ