DRACOLoaderをWebにUploadすると動作しない(DRACOLoaderでwasmを使用しない方法)(Threejs)

この記事は約3分で読めます。
スポンサーリンク

やりたいこと

以下の実装を行ったときにローカルでは動作するが、WEBにUplodaすると動作しない際の修正方法

ローカルで動作するJavascriptをConohaにUploadすると以下のようなエラーが表示され読み込まれませんでした。

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
スポンサーリンク

環境

Threejs: r150

Chrome: 111.0.5563.65

スポンサーリンク

wasmを使用しないでDRACOLoaderを使用する。

JavaScript

DracoLoaderの作成を以下のように修正します。のtypeをjsに設定します。

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

追加コードは以下の1行です。

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

wasmを使用せずにJavascriptだけで動作するようになります。

ただし読み込みはwasmよりも遅いようです。(体感ではあまり感じませんでした)

結果

ローカルと同様にWeb上でも圧縮されたdice-c.glbを読み込んで表示することができました。

スポンサーリンク

参考にさせていただいたサイト

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で読込、表示するまとめ

コメント

タイトルとURLをコピーしました