やりたいこと
以下の実装を行ったときにローカルでは動作するが、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.
コメント