Three.jsのインポートで躓いた

初めに

最近Three.jsを趣味で触りたいと思い、勉強を始めました。初学者のため、誤りや不適切な部分があれば教えていただけると幸いです。

躓いたこと

マウス操作の機能をつけるためにOrbitControlsをインポートしようとしたところ、エラーになりました。

• 問題のコード

import * as THREE from "./build/three.module.js";
import { OrbitControls } from "./jsm/controls/OrbitControls.js";

• コンソールに表示されたエラー文

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

考察

threeというモジュールが見つからないようなので、パスの位置が今参考にしている資料のバージョンと異なるみたい。
→今のバージョンの正しいインポート元はどこだろう？

検索したところ、以下の内容が参考になりそう。

原因と修正

r137以降、ブラウザーでGLTFLoaderなどのES6モジュールを使用するにはインポート マップが必要になったようです。
まず初めにHTMLファイルのbodyタグ配下に以下のコードを記載します。

    <script type="importmap">
      {
        "imports": {
          "three": "./build/three.module.js"
        }
      }
    </script>
    <!-- インポート マップはjsファイルの呼び出しより前に記載すること -->
    <script src="任意のjsファイル" type="module"></script>

次にjsファイルを修正します。

import * as THREE from "three"; // 修正
import { OrbitControls } from "./jsm/controls/OrbitControls.js";

画面を更新してエラーが消え、レンダリングが正しく表示されていればOKです。

最後に

Three.jsは日本語の学習教材が少なく、バージョンによる違いも多い気がします。しかしなかなか楽しいので英語と格闘しつつ、いろいろ作ってみようと思います。