本記事では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を作成します。
<!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ファイルの準備
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を使用してみるのが一つの解決策としていいかと思います。本記事が何かのお役に立てば幸いです。