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

Table of contents

The purpose
Environment
Use DRACOLoader without using wasm.
1. JavaScript
2. Result
Reference
Related page

The purpose

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

When I uploaded the Javascript that worked locally to Conoha, the following error appeared, and it wouldn’t load.

4f251973-f58e-42c3-b428-9252c0610ca9:39 failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected 97 bytes, fell off end @+187
4f251973-f58e-42c3-b428-9252c0610ca9:25 Aborted(CompileError: WebAssembly.instantiate(): expected 97 bytes, fell off end @+187)
4f251973-f58e-42c3-b428-9252c0610ca9:25 Uncaught (in promise) RuntimeError: Aborted(CompileError: WebAssembly.instantiate(): expected 97 bytes, fell off end @+187). Build with -sASSERTIONS for more info.
    at f (4f251973-f58e-42c3-b428-9252c0610ca9:25:34)
    at 4f251973-f58e-42c3-b428-9252c0610ca9:39:438

Environment

Threejs：　r150

Chrome：　111.0.5563.65

Use DRACOLoader without using wasm.

JavaScript

The DracoLoader creation will be modified as follows: the ‘type’ attribute will be set to ‘js’.

	const loader = new GLTFLoader();
	const dracoLoader = new DRACOLoader();
	dracoLoader.setDecoderPath('./js/libs/draco/');
	dracoLoader.setDecoderConfig({ type: 'js' });　//add
	loader.setDRACOLoader(dracoLoader);

The only additional line of code is

	dracoLoader.setDecoderConfig({ type: 'js' });

It will now run entirely in JavaScript without using WebAssembly.

However, loading appears to be slower than with WebAssembly, although the difference was not perceptible in practice.

Result

We are able to load and display the compressed dice-c.glb file on the web, just as I could locally.

Reference

three.js/examples/jsm/libs/draco/README.md at dev · mrdoob/three.js

JavaScript 3D Library. Contribute to mrdoob/three.js development by creating an account on GitHub.

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