効率のよい開発ができるよう、最新の開発環境の構築もしましょう。開発環境を整えれば最新のJavaScript言語仕様を利用でき、開発効率向上に役立つはずです。また、型定義のあるTypeScriptを使ってコード補完をフルに効かせて開発するのもオススメです。
import文の課題
とくに注意したいのは、Three.jsの本体に含まれていないライブラリです。本入門サイトで扱ったOrbitControlsやmergeGeometries、GLTFLoaderなどが該当します。
これらの機能はThree.js本体に含まれていないので、入門サイトでは別途JavaScriptファイルをimportmapを使って読み込むことで利用しました。バンドルツール（webpackやVite等）を使った開発では、importmapでの利用する方法とは異なる方式で解決しなければなりません。以下に対策方法を示します。
バンドルツールで使う方法
Node.jsのバンドルツールで取り込む場合は、THREE名前空間上に該当機能が存在しないので、import文の書き方を調整する必要があります。
three/examples/jsm/以下の階層に該当機能が存在するので、ここにパスを通します。
OrbitControls の使い方
import文で、three/examples/jsm/controls/OrbitControlsから該当機能を読み込みます。import文によりOrbitControlsオブジェクトで該当機能を得ているので、これを使って利用します。THREE.OrbitControlsではなくOrbitControlsで参照していることがポイントです。
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// ･･･省略
// カメラを作成
const camera = new THREE.PerspectiveCamera(/* 省略 */);
// カメラコントローラーを作成
const controls = new OrbitControls(camera, renderer.domElement);
サンプルを用意しているので、以下の構成を参考ください。
mergeGeometries の使い方
import文で、three/examples/jsm/utils/BufferGeometryUtilsから該当機能を読み込みます。import文によりmergeGeometriesが該当機能を得ているので、これを使って利用します。THREE.BufferGeometryUtils.mergeGeometriesではなくmergeGeometriesで参照していることがポイントです。
import * as THREE from "three";
import { mergeGeometries } from "three/examples/jsm/utils/BufferGeometryUtils";
// ･･･省略
// ジオメトリを生成
const geometry = mergeGeometries(boxes);
もしくは、以下のように* as BufferGeometryUtilsとしてimport文を記載しても問題ありません。
import * as THREE from "three";
import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils";
// ･･･省略
// ジオメトリを生成
const geometry = BufferGeometryUtils.mergeGeometries(boxes);
GLTFLoader の使い方
import文で、three/examples/jsm/loaders/GLTFLoaderから該当機能を読み込みます。import文によりGLTFLoaderオブジェクトが該当機能を得ているので、これを使って利用します。THREE.GLTFLoaderではなくGLTFLoaderで参照していることがポイントです。
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// ･･･省略
// GLTF形式のモデルデータを読み込む
const loader = new GLTFLoader();