効率のよい開発ができるよう、最新の開発環境の構築もしましょう。開発環境を整えれば最新のJavaScript言語仕様を利用でき、開発効率向上に役立つはずです。また、型定義のあるTypeScriptを使ってコード補完をフルに効かせて開発するのもオススメです。

import文の課題

とくに注意したいのは、Three.jsの本体に含まれていないライブラリです。本入門サイトで扱ったOrbitControlsやmergeBufferGeometries、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);

サンプルを用意しているので、以下の構成を参考ください。

mergeBufferGeometries の使い方

import文で、three/examples/jsm/utils/BufferGeometryUtilsから該当機能を読み込みます。import文によりmergeBufferGeometriesが該当機能を得ているので、これを使って利用します。THREE.BufferGeometryUtils.mergeBufferGeometriesではなくmergeBufferGeometriesで参照していることがポイントです。

import * as THREE from "three";
import { mergeBufferGeometries } from "three/examples/jsm/utils/BufferGeometryUtils";

// ･･･省略

// ジオメトリを生成
const geometry = mergeBufferGeometries(boxes);

もしくは、以下のように* as BufferGeometryUtilsとしてimport文を記載しても問題ありません。

import * as THREE from "three";
import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils";

// ･･･省略

// ジオメトリを生成
const geometry = BufferGeometryUtils.mergeBufferGeometries(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();