How to execute ".babylon" files with Node.js server

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.

An example of file path of .babylon file and others

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!