はんざき技研

プログラミングや3DCGの記録

Three.jsの入門でいきなり躓いたので原因を記しておく

日本語でthree.jsの入門と検索すると上位に出てくる記事の通りに進めると、言語仕様の変更に引っかかった。
具体的にはローダーを使用したときに上手くいかなかった。

1.jsコードは分割しない

一つ目はjsファイルを分割して読み込む形式にするとインポートが上手くいかないこと。
htmlファイル内に次を挿入して本文をhtmlファイルに直接書く。

<script type="module">
//ここに本文
</script>

2.インスタンス化の方法

二つ目はクラスのインスタンス化をするときには頭にTHREE.をつけること。
例えばサンプルコードに次のような宣言があったとする。

const gltfLoader = new GLTFLoader();

これをインスタンス化の頭にはTHREE.をつけて次のようにする必要がある。

const gltfLoader = new THREE.GLTFLoader();