3番目の記事

Three.jsのエラーで絶賛デバック中の貴方にとりあえず試してほしい事があります

Three.jsで返されるエラーの内容のほとんどはこの2つ

Three.js文法エラーあるいはThree.jsの互換性エラー
この２つに分類できると思います。

何が正解なのかわからないエラー表示にはびっくりしますよね。でも、大丈夫。落ち着いて対処していけばなんとか動いてくれます！

今回は、筆者自身がよく体験する原因不明のThreeJSエラーの解消法をご説明いたします

Three.jsの文法チェックをもう一度してみる。
1. Three.js文法エラー
2. ライブラリの読み込みをチェック
3. JavaScriptのスコープの問題
Three.jsの互換性の問題
1. Three.jsのVerの問題
2. ライブラリの互換性の問題
3. ブラウザを変えてみる
あとがき

Three.jsの文法チェックをもう一度してみる。

Three.js文法エラー

文法は、1番多いエラーの原因です。Three.jsではメソッドやプロパティの名前に大文字が含まれていることが多く、当たり前ですが、大文字を小文字で入力してる場合エラーになります。

Uncaught TypeError: THREE.~~~ is not a constructor
このように、インスタンス元のクラスが存在しないとエラーが出たり、そのようなプロパティは存在しない(property of undefined)と返されると、文法エラーであることがわかります。

ライブラリの読み込みに問題がある。

Three.jsには多くの拡張ライブラリが存在し、TweenMaxなどの数式ライブラリなども使う場合、多くのライブラリを読み込むと思います。

npm,cdn経由で読み込む方も、フォルダに直接ファイルをダウンロードする方ももう一度ちゃんと読み込めているかチェックすることをお勧めします。

よくあるパターンなのですが、ライブラリをインストールしていなかったり、ライブラリの読み込み順番が違っているとエラーが出ます。

Three.jsの前に拡張ライブラリを読み込んだりすると、そのクラス定義されていないよ!とエラーを返してきます。
そりゃ、文法見返しても解消されないわけです。

JavaScriptスコープの問題

次は、特に、アニメーションループさせる関数内で、プロパティの参照エラーを引き起こすパターンです。

ネットに書かれているThree.jsコードは、整理されていないコードが多く、
そのままコピペしてしまうと、スコープエラーがよく出ます。

これの解決策は、Three.jsコードの大部分をClassにし、あとはグローバルスコープでクラスを呼び出すだけという状態にすることです。
保守性の面でもこの方法はエラーが出にくいですが、

勉強する時などに、教材にクラスを使って書かれているコードを見ることはほとんどないと思います。
グローバルスコープに直接コードを書く場合は、変数の再定義ができないように、 varを使わずletを使ったり、グローバルスコープでの呼び出しに注意すると良いでしょう。

あとは、Object3Dなどをwindowで定義する際は、空定義ではなく実際に`new THREE.Object3D()`として読んでやらないと、スコープ問題が発生します

これらは私もよくやるエラー内容です。

                      
    // スコープエラー

    function fn() {
    let sphere;
    let geometry = new THREE.SphereGeometry( 15, 32, 16 );
    let material = new THREE.MeshToonMaterial();
    sphere = new THREE.Mesh( geometry, material );
    scene.add( sphere );

    // fn関数のスコープ内から`sphere`は参照できる
    console.log(sphere); // => Object3D[]
    }
    fn();
    // fn関数のスコープ外から`sphere`は参照できないためエラー
    console.log(sphere);

Three.jsの互換性の問題

諦めずに、もう一段階試してみましょう!!

Three.jsファイルのverを変えてみる。

Three.jsでは、サポートしなくなった機能などが多数あり、新しいVerのThree.jsをインポートしていることで、使いたい機能が動かなくなっている可能性があります。

例えば、"new THREE.Geometry()"などはThree.jsのバージョンr125以降からサポート外となっています。

そのため、Geometryをインスタンス化したい場合は、r124以前のverのThree.jsをインポートする必要があります。

r124のThree.jsのリンク

CDN経由でThree.jsをインポートする方は、上記から行うことができます!

余談ですが、new THREE.Geometryは、
代替する"new THREE.BufferGeometry()"からは、デフォルトでは頂点情報を毎回更新することなく挙動するため描画のパフォーマンスが良くなりました。

サポート対象外となった機能はそれなりに欠点がある場合が多いため、旧バージョンのThree.jsでエラーが解消した場合は、

Web上の偉大な先人たちに教えてもらい、新しい書き方をしてみることをお勧め致します!

Three.jsファイルと拡張ライブラリの互換性を合わせる

これは主に、フォルダにライブラリを直接ダウンロードして使っている場合に多いのですが、 Three.jsと拡張ライブラリの互換性が合わずに、何らかのエラーが出ているケースです。

これに関しては同じ時期のcdnにライブラリインポートを統一するか、
npm経由でthree.jsをインストールし、importするのがベストです。

私個人としては、開発、ビルドなど一貫して高速に処理してくれるviteをお勧めします。
慣れればとても気持ちよく開発ができるので利用していない方は、導入を検討されてはいかがでしょうか。

ブラウザを変えてみる。

ブラウザを変えることで、動く場合もあります。 GoogleChromeでしか動かない場合や、Safariだけは動かない場合など。
こちらも最後に試してみてください!

あとがき

今回はThree.jsを4年ほどいじっている筆者がエラーについて思い当たる節を絞り出してみました!
他にもこんな解決法がある！という方は、下のコメント投稿欄で共有していただけるととても嬉しいです！！

読んでいただきありがとうございました！貴方の仕事に役立てれば幸いです!

Three.jsでエラーが出た時に試してほしい事