.babylonファイルを読み込んでNode.jsサーバで実行する方法

Babylon.jsには3Dモデルの配置や、テクスチャのマッピング情報などをまとめた「.babylon」というファイル形式があります。

今回は.babylonファイルをWebブラウザで表示するまでの流れを書きました。基本的ではありますが、私のようなWeb初心者にとっては、任意の3DモデルをBabylon.jsで実行する手順が意外にわかりづらかったので、整理しました。

1. .babylonファイルに必要なテクスチャ、環境マップファイルなどを同じフォルダに配置する
2. 最低限のコードをindex.htmlに記述する
3. node.jsのサーバ起動設定を行う
4. Webブラウザから実行する
5. おわりに

1. .babylonファイルに必要なテクスチャ、環境マップファイルなどを同じフォルダに配置する

たとえば、今回例として使うSwordモデルには、持ち手の部分のテクスチャファイル(sting_base_color.png)と、刃の部分の光効果を入れたファイル(environment.dds)を使っているので、この２つをscene.babylonと同じ場所に配置します。

.babylonファイルを使う時のテクスチャ配置

2. 最低限のコードをindex.htmlに記述する

このようなコードを記述し、使いたい.babylonを記述します。下の方にある、 BABYLON.SceneLoader.ImportMesh()の第3引数が使いたいbabylonファイルの名称です。

<!doctype html>
<html>
<head>
    <title>Default .babylon loading scene</title>
    <meta charset="UTF-8">
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
    <style>
        html, body {overflow: hidden; width: 100%; height: 100%; margin: 0; padding: 0;font-family: OpenSans, tahoma, arial, sans-serif;color:white;}
        #canvas {width: 100%; height: 100%; touch-action: none;}
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var engine = new BABYLON.Engine(canvas, true);
    engine.enableOfflineSupport = false; // Dont require a manifest file
    var createScene = function(){
        var scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color3.White();
        var camera = new BABYLON.ArcRotateCamera("arcCam",BABYLON.Tools.ToRadians(0),BABYLON.Tools.ToRadians(0),10.0,BABYLON.Vector3.Zero(),scene);
        camera.attachControl(canvas,true);
        var light = new BABYLON.PointLight("PointLight",new BABYLON.Vector3(0,0,0),scene);
        light.parent = camera;
        light.intensity = 1.5;
        BABYLON.SceneLoader.ImportMesh("","","scene.babylon",
        scene,function(newMeshes,particleSystems,skeltons) {
    });
    return scene;
}
var scene = createScene();
engine.runRenderLoop(function() {scene.render();});
</script>
</body>

なお、ImportMeshにはアニメーション再生の定義づけをするなど、他にも使い方がありますが、そこは使うときがあれば整理しようと思います。

3. node.jsのサーバ起動設定を行う

自前でサーバ環境がある場合はそれでもかまいませんが、node.jsを使うことでサーバ構築の手間を減らせるので、簡易的に確認したいときはおすすめです。

大きな手順として、npm initによりpackage.jsonというファイルを生成します。package.jsonは今回使われるサーバプロジェクト一式を管理するものです。

$ npm init -y
Wrote to /<folderpath>/package.json:

{
  "name": "html",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

次にサーバ起動に必要なモジュール「Express」をこのフォルダ内で使えるようにします。

$npm install --save express
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN html@1.0.0 No description
npm WARN html@1.0.0 No repository field.

+ express@4.16.4
added 48 packages from 36 contributors and audited 121 packages in 3.051s
found 0 vulnerabilities

Expressはこちらの公式ドキュメントに記載の通りです。Node.js向けのWebフレームワークです。

Express - Node.js web application framework

続いて、サーバを稼働します。同じフォルダ内に以下のserver.jsを作ります。

'use strict';
const express = require('express');
const app = express();
app.use(express.static('./'));
app.listen(8001, ()=> { //ポート番号は任意に変更可能
  console.log('Server Start');
});

最後に、ターミナルよりサーバ起動コマンドを実行します。

$ node server.js
Server Start   //補足：これはserver.jsに書いたConsole.logの中身

なお、一連の流れはこちらの記事を参考にさせていただきました。ありがとうございます。

node.js express でWebサーバーを作り、ファイル/ディレクトリ一覧表示する - Qiita

4. Webブラウザから実行する

Webブラウザより、http://localhost:8001にアクセスします。

5. おわりに

この流れが整理できたので、今後Babylon.js Editorで表現を作って処理を自分で書くこともできそうです。

CrossRoad

XRを中心とした技術ブログ。 Check also "English" category.