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

import文の課題

とくに注意したいのは、Three.jsの本体に含まれていないライブラリです。本入門サイトで扱ったOrbitControlsmergeBufferGeometriesGLTFLoaderなどが該当します。

これらの機能はThree.js本体に含まれていないので、入門サイトでは別途JavaScriptファイルをscriptタグを使って読み込むことで利用しました。バンドルツール(webpackやVite等)を使った開発では、scriptタグを読み込んで利用する方法とは異なる方式で解決しなければなりません。以下に対策方法を示します。

バンドルツールで使う方法

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();
公開日 : / 最終更新日 :
※Three.js の2022年5月現在のリビジョン140で解説内容が正しく動作することを確認しています。
また、2022年夏にサイトを移転しますのでご了承ください。