【Three.js】OrbitControls.jsのimportエラー

2022/04/12時点の最新バージョン（r139）のThree.jsのOrbitControls.jsを以下のようにimportするとエラーが発生したので対応法を記載しておきます。

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

エラー文

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

どうやらThree.jsがバージョンアップされて書き方が変わったようです。

対処法

import文は以下のように修正します。

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

また、htmlのjavascriptファイルを読み込んでいる部分の上に以下のコードを記載します。

<script type="importmap">
        {
            "imports": {
                "three": "{three.module.jsのパス}"  //例えば、./build/three.module.jsなど
            }
        }
</script>

試してみてください。