Babylon.js has a file type ".babylon", which manages geometries of 3D model, file path of texture, and so on.
In this article, I wrote a sequence from setting ".babylon" file to execute on web browser with Node.js. Of course it is a basic sequence, but it's not easy for me such as web newer to understand it. If you're also a new to BJS, it's helpful for you.
日本語版はこちら (The following article is Japanese version )
.babylonファイルを読み込んでNode.jsサーバで実行する方法 - CrossRoad
Environment
* Node.js : v11.1.0
* Chrome : 71.0.3578.98
* MacOSX : 10.14.2
- 1. Put on ".babylon" file, texture, and environment map file at the same folder
- 2. Implement minimum source code on index.html
- 3. Setting Node.js server
- 4. Access the contents on web browser
- 5. Conclusion
1. Put on ".babylon" file, texture, and environment map file at the same folder
For example, I put on "sting_base_color.png", "environment.dds", and "scene.babylon" at the same folder.
2. Implement minimum source code on index.html
You implement the following source code and replace .babylon file name. Check 3rd augment of "BABYLON.SceneLoader.ImportMesh" method.
<!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>
By the way, the "ImportMesh" method has other feature such as definition of animation playback. I'll introduce it soon.
3. Setting Node.js server
If you have original server, you use it. If not, I recommend Node.js because it saves server setting time.
$ 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" }
$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
Check the reference for "Express".
Express - Node.js web application framework
You create a new file "server.js" and write the followings.
'use strict'; const express = require('express'); const app = express(); app.use(express.static('./')); app.listen(8001, ()=> { //You can change any port number console.log('Server Start'); });
Finally, type the server start command.
$ node server.js Server Start //message of console.log
Reference for Node.js and server setup (a Japanese article)
node.js express でWebサーバーを作り、ファイル/ディレクトリ一覧表示する - Qiita
4. Access the contents on web browser
Access http://localhost:8001
.
5. Conclusion
In this article, I introduced a sequence from setting ".babylon" file to execute on web browser with Node.js. It's a basic but helpful for new to BJS. In this blog, I'll translate more and more English articles. Stay Tuned!