○
category icon
2022-05-08
JavaScript - Three.js

Three.js で 3D モデルを読み込む方法

Three.js
0.140.0
profile
hikaru
Software Developer / DIY'er

Three.js で 3D モデル(GLTFファイル)を読み込むサンプルプログラムです。

Demo

実際に動作するデモです。マウス操作にてカメラの移動ができます。

GLTF ファイルを読み込む処理

ts
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

// モデル読み込みローダー
const loader = new GLTFLoader();

// モデルを読み込む
const model = await loader.loadAsync(`/Duck.glb`);

Three.js で gltf ファイルを読み込むには GLTFLoader クラスの load / loadAsync メソッドを使用します。

load メソッドは、現在ではレガシーとなりつつある Callback による読み込みとなっています。今から使うなら loadAsync メソッドを使って async/await 呼び出しをおススメします。

GLTFLoader.loadAsync メソッドの定義

なお、GLTFLoader クラスの loadAsync メソッドは以下の定義となっています。

loadAsync(url: string, onProgress?: (event: ProgressEvent) => void): Promise<GLTF>;

  • url

    .gltf または .glb ファイルの URL。

  • onProgress

    (オプション) ロードの進行中に呼び出される関数。

  • 戻り値

    読み込んだ GLTF オブジェクト。

3D モデル読み込みサンプル

実際にモデルを表示させるためには、基本的に光源が必要になります。(演出であえて光源を無くすこともあります)
光源を含めたコードサンプルを以下に記載します。

ts
import * as THREE from 'three';

// モデルを読み込む
const loader = new GLTFLoader();
const model = await loader.loadAsync(`/Duck.glb`); // GLTFファイルをURLで指定する
model.scene.scale.set(0.25, 0.25, 0.25);           // モデルが大きいので縮小する

// 環境光源 (光源が無いとモデルが真っ黒になるので必要)
const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);

// 平行光源 (太陽を模した光源。この光源が無いと、のっぺりしてしまう)
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
directionalLight.position.set(5, 5, 0);

// シーンを初期化
const scene = new THREE.Scene();
scene.add(model.scene);      // 読み込んだGLTFモデルをシーンに追加
scene.add(ambientLight);     // 環境光源をシーンに追加
scene.add(directionalLight); // 並行光源をシーンに追加

今回のソースコードの URL を記載しておきます。ライセンスは MIT としていますのでご自由に利用ください。

参考

関連記事 ( JavaScript - Three.js )