本記事ではThree.jsのGLTFLoaderを使用してBlenderで作成した3Dモデル(glTF型式)の3Dモデルを表示する方法をまとめています。

前回の記事ではBlenderで作成したはobjファイル形式の3DモデルをThree.jsのOBJLoaderを使用しWebページ上に表示しましたが、Blenderで作成した3Dモデルの色が以下の画像のように無くなってしまいました。

このように前回はThree.jsのOBJLoaderを使用してBlenderで作成した3Dモデル（obj形式）をWebページ上に表示してみましたが、Three.jsにはOBJLoader以外にもgltfloaderがあるので本記事ではgltfloaderを使用し3Dモデル（gltf形式）をWebページ上に表示する方法をまとめました。

1. 3Dモデル（gltf形式）を準備

前回に引き続き今回も自分が作成した雪だるまの3Dモデル（yukidaruma.glb）を使用します。

2. HTMLの準備

Webページ上に3Dモデルを表示するためのHTMLを作成します。

hoge.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>show3DmodelPage</title>
    <script type="importmap">
                    {
                        "imports": {
                            "three": "./three.js-dev/build/three.module.js",
                            "OrbitControls":"./three.js-dev/examples/jsm/controls/OrbitControls.js",
                            "GLTFLoader":"./three.js-dev/examples/jsm/loaders/GLTFLoader.js"
                        }
                    }
        </script>
    <script type="module" src="index.js"></script>
</head>

<body>
     <!-- // 3Dモデルを表示させるcanvas要素を作成 -->
    <canvas id="canvas"></canvas>
</body>
</html>

importmap部分で必要なThree.jsのファイルを読み込んでいます。
今回はthree, OrbitControls, GLTFLoaderの３つを読み込んでいます。

OrbitControl：OrbitControlsを使用する事で空間内のカメラの動きをマウスで制御できます。
GLTFLoader：GLTFLoaderを使用することでglTF型式の3Dモデルを読み込めます。

3. JavaScriptファイルの準備

index.js

import * as THREE from 'three';
import { GLTFLoader } from "GLTFLoader";
import { OrbitControls } from "OrbitControls";


// 画面サイズの取得
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

// レンダラーの作成
const canvas = document.getElementById('canvas')
const renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize(windowWidth, windowHeight);

// シーンの作成
const scene = new THREE.Scene();
// 背景色の設定(水色)
scene.background = new THREE.Color('#00bfff');

// 見やすいようにヘルパー（網目）を設定
let gridHelper = new THREE.GridHelper();
scene.add(gridHelper);

// カメラを作成
const camera = new THREE.PerspectiveCamera(75, windowWidth / windowHeight, 0.1, 1000);
camera.position.set(5, 2, 0);
camera.lookAt(0, 0, 0);

// ライトの作成
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 20, 5);
scene.add(light);

// マウス制御
const controls = new OrbitControls(camera, renderer.domElement);

// 3Dモデルの読み込み
const loader = new GLTFLoader();
loader.load('yukidaruma.glb', function (gltf) {
    const model = gltf.scene;
    model.scale.set(0.1, 0.1, 0.1);
    scene.add(model);
});

// アニメーション
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

// アニメーション実行
animate();

GridHelper
GridHelperを使用する事で地面がどこにあるか把握できるので便利です。

let gridHelper = new THREE.GridHelper();
scene.add(gridHelper);

OrbitControls
OrbitControlsをしよする事でcanvas内での空間内のカメラをPCならマウス操作、モバイルならタッチ操作する事ができます。

const controls = new OrbitControls(camera, renderer.domElement);

4. 実行結果

実行した結果、以下のようにWebページ上にBlenderで作成した色がそのままの3Dモデルが表示されました！

5. まとめ

本記事ではThree.jsを使用しWebページ上にBLenderで作成したglTF型式の3Dモデルを表示する方法をまとめました。
前回の記事ではOBJLoaderを使用し3Dモデルを表示した際に色が無くなってしまいましたが、今回はGLTFLoaderを使用し3Dモデルを表示した際に色はBlenderで作成した時のまま表示ができました。
OBJLoaderを使用し色が無くなってしまった方はGLTFLoaderを使用してみるのが一つの解決策としていいかと思います。本記事が何かのお役に立てば幸いです。