CrossRoad

AR、MR、VR、Babylon.jsを中心とした技術ブログ。 If you're non-Japanese native guys, check "English" category.

Babylon.js Editorでシーンを出力し、ブラウザで実行する方法

前回までの記事で、Babylon.js Editorで魔法剣エフェクトを作る方法を紹介してきました。

SwordモデルにPBR(Physical Based Rendering)をつける方法
【2018/12/9更新】UnityのようなGUIでWebGLコンテンツが作れるBabylon.js EditorでPBRを試してみた - CrossRoad

Swordモデルに炎のパーティクルをつける方法
Babylon.js EditorのParticle Systemを使って魔法剣エフェクトを作りました - CrossRoad

パーティクルをスクリプトから制御する方法
Babylon.js Editorでスクリプトからオブジェクトを制御する方法 - CrossRoad

今回は、シーンを出力してブラウザで実行する方法を紹介します。

  • Mac OS 10.14.1

  • Babylon.js Editor 2.5.0

1. Babylon.js Editorでシーン出力する方法

シーン出力するには、画面左上のProjectボタンからExport Templeteをクリックします。

Babylon.js EditorのExport Templeteボタン

すると、このように出力先を指定する画面が出ます。

Babylon.js Editorの保存先選択画面

どういうわけか、「保存」ではなく「開く」になっていますが、ここでは出力先を選んだら「開く」をクリックします。

今回は"ex"というフォルダに出力しました。すると、このように"node_modules"フォルダを含んだ複数のファイルが出力されます。

Babylon.js Editorで出力したフォルダの例

2. シーンを実行する

Web関係の技術に関わっている方には説明不要ですが、node_modulesというフォルダがある通り、ここではnode.jsを使っています。

Babylon.js Editorの出力結果にはサーバとして起動させるための設定も入っているので、node.jsの操作でサーバとして実行するだけです。

$ npm run build
$ npm run webserver

ターミナルから実行すると、このようなログが出ます。

PCname:export Username$ npm run webserver

> babylonjs-editor-generated@0.0.1 webserver <user directory>/ex
> http-server -p 1338

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:1338
  http://<IP address>:1338
Hit CTRL-C to stop the server

ブラウザから実行した結果です。

なお、Export Templeteで出力された結果に入っているpackage.jsonの"webserver"に書いてある数値を1338から別の番号に変えれば、アクセスポートを変更できます。

{
  "name": "babylonjs-editor-generated",
  "version": "0.0.1",
  "description": "Generated Template by BabylonJS Editor",
  "scripts": {
    "clean": "rm -rf .build && rm -rf .declaration",
    "compile": "tsc -p .",
    "build": "npm run clean && npm run compile",
    "watch": "tsc -p . --watch",
    "webserver": "http-server -p 1338"
  },

3. 終わりに

いくつかに分けてBabylon.js Editorの基本的な使い方を解説しました。しかし、試していない使い方がまだまだあるので、引き続き調べて実際に使ってみようと思っています。

ところで、下記の記事を見つけました。

Behind the Scenes with Adobe Dimension Engineers: How We Built the 3D Publish Feature | Adobe Blog

DimensionはAdobe製ソフトウェアの一つで、3Dモデルを含んだデザインができます。AdobeもBabylon.jsを使っているという記事なのですが、意外なところでも広まりつつあるようですね。