std9.jp
JavaScript - Three.js · ·↻ 2022-05-08 · by hikaru

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

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

Three.js0.140.0
目次 (5)
  1. Demo
  2. GLTF ファイルを読み込む処理
  3. GLTFLoader.loadAsync メソッドの定義
  4. 3D モデル読み込みサンプル
  5. 参考

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

:::message info この記事では初歩的な内容やプロジェクトのセットアップについては省略しています。

セットアップについては Three.js を TypeScript で使う方法 ～ 初めての Three.js 入門編 ～ を参照してください。 :::

Demo

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

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

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 モデル読み込みサンプル

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

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 としていますのでご自由に利用ください。

参考