本記事ではblenderで作成したobjファイルの3Dモデルをwebページ上に表示させる方法についてご紹介します。
1. 3Dモデルの準備
今回はblenderで自分が作成した下記画像の雪だるま（yukidaruma.obj）を使用します。
2. HTMLの準備
Three.jsでWebページ上に3Dモデルを表示するためのHTMLを作成します。
bodyタグの中にid="canvas"を準備し、次に作成するJavaScriptファイルのhoge.jsを読み込んでいます。
※Three.jsはファイルを読み込みやCDN型式等での利用方法がありますが、本記事ではThree.jsの読み込みについては記載しておりませんので、別でThree.jsに関して読み込みの記述の追加が必要です。
hoge.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="canvas"></div>
<script src="hoge.js"></script>
</body>
</html>
3. JavaScriptファイルの準備
3Dモデルを読み込んで表示させるJavascriptファイルのhoge.jsを作成します。読み込む3Dモデルの型式はobjファイルを想定していますので、OBJLoaderを使用し3Dモデルを読み込みます。
hoge.js
window.onload = function () {
// レンダラーの作成
let renderer = new THREE.WebGLRenderer();
// 画面サイズの取得
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
renderer.setSize(windowWidth, windowHeight);
document.getElementById("canvas").appendChild(renderer.domElement);
// シーンの作成
let scene = new THREE.Scene();
// 背景色の設定
scene.background = new THREE.Color('#00bfff');
// 見やすいようにヘルパーを設定
let gridHelper = new THREE.GridHelper();
scene.add(gridHelper);
// カメラの作成
let camera = new THREE.PerspectiveCamera(80, windowWidth / windowHeight, 0.1, 1000);
camera.position.set(4, 3, 0);
camera.lookAt(0, 0, 0);
// ライトの作成
let light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(4, 4, 4);
scene.add(light);
// objLoader
const objLoader = new THREE.OBJLoader();
// 3Dモデルの読み込み
objLoader.load(
'/assets/obj/yukidaruma.obj',
function (obj) {
// スケールの変更 (読み込んだ3Dモデルが大きすぎたため)
obj.scale.set(0.1, 0.1, 0.1);
scene.add(obj);
},
);
// アニメーション実行
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
};
● GridHelper
GridHelperを使用する事で地面がどこにあるか把握できるので便利です。
let gridHelper = new THREE.GridHelper();
scene.add(gridHelper);
4. 実行結果
実行した結果、ブラウザに3Dモデルが表示されます。(オブジェクトに色はついてないです。。)
5. まとめ
本記事ではThree.jsを利用しblenderで作成した3DモデルをWebページ上に表示してみました。実行した結果、blender側で設定した3Dモデルの色が無くなっていました。。本記事で使用したOBJLoader以外にもgltfloaderがThree.jsにはあるので次はそちらで3Dモデルを表示させてみます！