【Three.js】JavaScriptで3Dモデル(gltf形式)をWebページ上に表示する方法

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

[**前回の記事**](https://qiita.com/enumura1/items/c303dd5e759ab02b3345)ではBlenderで作成したはobjファイル形式の3DモデルをThree.jsの**OBJLoader**を使用しWebページ上に表示しましたが、Blenderで作成した3Dモデルの色が以下の画像のように無くなってしまいました。
![yukidaruma_color_godby.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/d35cc0e4-f47c-3535-1426-faa2e2d4bcbc.png)
このように[**前回**](https://qiita.com/enumura1/items/c303dd5e759ab02b3345)はThree.jsの**OBJLoader**を使用してBlenderで作成した3Dモデル（obj形式）をWebページ上に表示してみましたが、Three.jsにはOBJLoader以外にも**gltfloader**があるので本記事ではgltfloaderを使用し3Dモデル（gltf形式）をWebページ上に表示する方法をまとめました。

 ## 1. 3Dモデル（gltf形式）を準備
前回に引き続き今回も自分が作成した雪だるまの3Dモデル（yukidaruma.glb）を使用します。
![img_ykdra.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/83f61681-3311-806e-3d8a-e44f265d4286.png)

## 2. HTMLの準備
Webページ上に3Dモデルを表示するためのHTMLを作成します。
```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ファイルの準備
```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を使用する事で地面がどこにあるか把握できるので便利です。
```javascript
let gridHelper = new THREE.GridHelper();
scene.add(gridHelper);
```

- OrbitControls
OrbitControlsをしよする事でcanvas内での空間内のカメラをPCならマウス操作、モバイルならタッチ操作する事ができます。
```javascript
const controls = new OrbitControls(camera, renderer.domElement);
``` 

## 4. 実行結果
実行した結果、以下のようにWebページ上にBlenderで作成した色がそのままの3Dモデルが表示されました！
![ObjColor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1247619/ec8bd075-2795-7877-5037-92db5a387af3.png)

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