本日はBabylon.js枠です。
Babylon.js自体は登場時から注目はしており、日本でのコミュニティ活動の中心的人物であるイワケンさんのGitHubをまねてみていたりなどもしていたのですが、ハローキューブを行ってはいませんでした。
今回お仕事用の社内ツールとしてWebXRアプリケーションがあれば非常に役立つことがありチュートリアルを見ながらハローキューブを行っていきます。
〇Babilon.jsとは？
Babylon.jsはMicrosoftが開発したJavascriptを使用したリアルタイム３Dエンジンです。
初版自体は9年前の2013年には登場しておりHLSLを介したブラウザ上での3Dグラフィクスの表示を行うことができるようです。
昨年Babylon.js 5.0が公開され大きな話題になっていました。
〇環境
・VisualStudio Code
・Node.js
〇プロジェクトフォルダの作成
①プロジェクトを配置するためのフォルダを作成します。
構造は次のようになります。
-(プロジェクト名)
--public
--scr
--dist
〇Babilon.jsの導入
ターミナルを開き次のコマンドを入力します。筆者はUnityアプリ以外の開発にそこまで詳しくないので使い慣れたツールとしてGitBashを使用しています。
$ npm init
これによってpackage.jsonが作成されます。
今回はGetStartに従いCoreとinspectorの二つのパッケージを導入します。
$ npm install --save-dev @babylonjs/core $ npm install --save-dev @babylonjs/inspector
〇TypeScripts環境の導入
次のコマンドをターミナルを使用して入力します。
$ npm i -D typescript
導入(orすでに存在しているか)されたか確認する方法として次のコマンドを実行します。
$ npx tsc -v
正常にインストールされている場合バージョン名が表示されます。筆者環境では4.9.5の環境を使用します。
この手順を踏んでいない場合tscコマンドが使用できません。
筆者環境ではtsc command not foundのエラーが出てしまいパスが外れてしまっているものと考えられましたが、Node.jsを再インストールすることで解消しました。
tscをプロジェクトで使用します。
$ tsc --init
このコマンドによってtsconfig.jsonが作成されます。
tsconfig.jsonの中身を次のように書き換えます。
{
"compilerOptions": {
"target": "es6",
"module": "ESNext",
"moduleResolution": "node",
"noResolve": false,
"noImplicitAny": false,
"sourceMap": true,
"preserveConstEnums":true,
"lib": [
"dom",
"es6"
],
"rootDir": "src"
}
}
次にwebpackのインストールを行います。
$ npm install --save-dev typescript webpack ts-loader webpack-cli
webpackはNode.jsで使用されるモジュールハンドラーツールです。
モジュールハンドラーというのは依存関係などを良しなにしてくれるようなもので依存関係を気にせず開発ができるようなもののようです。筆者も初めて触りましたのでいまいち理解できていないかもしれません。
$ npm install --save-dev html-webpack-plugin $ npm install --save-dev webpack-dev-server
以上で環境の構築が完了しました。
〇hellocubeのコード
publicフォルダ内にindex.htmlファイルを作成し中身を次のように記述します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of Your Project</title>
</head>
<body>
</body>
</html>
Babylon.jsはブラウザ（ウェブページ）として機能するためそのコアとなるファイルです。
次にscrフォルダ内にapp.tsファイルを作成し内部を次のように記述します。
import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";
import { Engine, Scene, ArcRotateCamera, Vector3, HemisphericLight, Mesh, MeshBuilder, SceneLoader,Color3 ,StandardMaterial,Texture} from "@babylonjs/core";
import { GLTFComponent } from "@babylonjs/inspector/components/actionTabs/tabs/tools/gltfComponent";
class App {
constructor() {
// create the canvas html element and attach it to the webpage
var canvas = document.createElement("canvas");
canvas.style.width = "100%";
canvas.style.height = "100%";
canvas.id = "gameCanvas";
document.body.appendChild(canvas);
// initialize babylon scene and engine
var engine = new Engine(canvas, true);
var scene = new Scene(engine);
var camera: ArcRotateCamera = new ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, Vector3.Zero(), scene);
camera.attachControl(canvas, true);
var light1: HemisphericLight = new HemisphericLight("light1", new Vector3(1, 1, 0), scene);
var sphere: Mesh = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);
// hide/show the Inspector
window.addEventListener("keydown", (ev) => {
// Shift+Ctrl+Alt+I
if (ev.shiftKey && ev.ctrlKey && ev.altKey && ev.key === 'i') {
if (scene.debugLayer.isVisible()) {
scene.debugLayer.hide();
} else {
scene.debugLayer.show();
}
}
});
// run the main render loop
engine.runRenderLoop(() => {
scene.render();
});
}
}
new App();
ここでは主にシーンの作成、球の作成、カメラの動作（視点変更）を実装しています。
球を生成する部分は次の一行になります。
var sphere: Mesh = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);
UnityのプリミティブオブジェクトのようにBabylon.jsで提供されているSphereを作成しています。
以上で準備が完了しました。
〇実行
ターミナルで次のコマンドを実行します。
$ npm run build $ npm run start
MicrosoftEdgeなどのブラウザでローカルホスト(http://localhost:8080/)へ接続します。
うまくいくと次のように球が見ることができます。
mouseの右クリックで移動、スクロールで近寄る、離れるといった操作が可能です。
最後にhellocubeですので球ではなくキューブを出現させていきます。
これは次のようにsphereをコメントアウトしてMeshBuilder.CreateBoxを記述します。
//var sphere: Mesh = MeshBuilder.CreateSphere("sphere", { diameter: 1 }, scene);
var cube : Mesh = MeshBuilder.CreateBox("box");
以上でハローキューブが完成しました。
