前回までの記事で、Babylon.js Editorで魔法剣エフェクトを作る方法を紹介してきました。
SwordモデルにPBR(Physical Based Rendering)をつける方法
【2018/12/16更新】UnityのようなGUIでWebGLコンテンツが作れるBabylon.js Editorの基本的な使い方 - 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をクリックします。
すると、このように出力先を指定する画面が出ます。
どういうわけか、「保存」ではなく「開く」になっていますが、ここでは出力先を選んだら「開く」をクリックします。
今回は"ex"というフォルダに出力しました。すると、このように"node_modules"フォルダを含んだ複数のファイルが出力されます。
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を使っているという記事なのですが、意外なところでも広まりつつあるようですね。
