Q&A
実現したいこと
現在、Electron + Three.jsで環境を作成しようとしています。
その中で、Three.jsがインポートされません。これを解決したいです。
前提
Electronの初期画面を作成後、<canvas>要素を配置。
この<canvas>要素に対してThree.jsで描画を行う第一歩として、
WebGLRendererインスタンスを作成し、これによって<canvas>要素を黒色でクリアしようとしました。
その後、以下のエラーが発生しました。
発生している問題・エラーメッセージ
エラーメッセージ > Failed to load resource: net::ERR_FILE_NOT_FOUND three.module:1 > Failed to load resource: net::ERR_FILE_NOT_FOUND RendererManager:1
試したこと
まず、エラーが発生しているRendererManager.jsはThree.jsのクラスを使っています。
そのため、これはThree.jsのモジュールが正しくインポートされていないと考えました。
そのうえで二つのことを試しました。
①index.htmlのパスをチェックする
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Gameapp</title> 6 <script type="module" src="./src/lib/three.module.js"></script> 7 <script type="module" src="./src/js/init.js"></script> 8 <script type="module" src="./src/js/renderer/RendererManager.js"></script> 9 </head> 10<body> 11 <canvas id="main_canvas"> 12</body> 13</html>
ここで行ったのは、モジュールのパスが誤っていないかの確認がまず一つです。
ただし、ここに誤りはありませんでした。
html
1<script type="importmap"> 2{ 3 "imports": { 4 "three": "./src/lib/three.module.js" 5 } 6} 7</script>
また、importmapによるインポートも試しましたが、機能しませんでした。
②package.jsonを修正する
json
1{ 2 "name": "gameapp", 3 "homepage": "./", 4 "version": "0.0.1", 5 "description": "", 6 "main": "./main.js", 7 "directories": { 8 "lib": "lib" 9 }, 10 "scripts": { 11 "test": "echo \"Error: no test specified\" && exit 1" 12 }, 13 "author": "konio", 14 "license": "ISC" 15}
main.jsを上記のように変更したのと、"homepage"の項目を追加しました。
しかしそれでも改善しませんでした。
回答1件
0
自己解決
index.htmlでモジュールを読み込む必要はなく、またjsファイルでのimportをthree.module.jsに直で設定すればよい
投稿2023/03/26 13:30
総合スコア1
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。