Help us understand the problem. What is going on with this article?

Babylon.js+Babel+webpackの開発環境構築

More than 3 years have passed since last update.

はじめに

webpackとES6を使いつつ、Babylon.jsを使える環境を作っていきます。
出来上がった物もGithubに置いています。

準備

Node.jsがインストールされているか確認してください。

$ node -v

npmがインストールされているか確認してください。

$ npm -v

Node.jsが入っていなければインストールをしてください。

構築

ファイル・ディレクトリ構成は以下のようにします。

project
├ build
│  ├ index.html
│  └ bundle.js
├ src
│  └  app.js
├ package.json
└ webpack.config.js

npm init

プロジェクトを置くディレクトリに移動したら、

$ npm init -y

を実行します。package.jsonが作成されていれば成功です。

インストール

webpack

webpackをグローバルにインストールします。

$ npm install -g webpack

プロジェクトディレクトリ内もインストールします。

$ npm install --save-dev webpack

実行を確認するためにwebpack-dev-serverもインストールします。

$ npm install --save-dev webpack-dev-server

トランスパイラ

トランスパイラ(Babel)をインストールします。これでES6のコードも書けるようになります。

$ npm install --save-dev babel-core babel-loader babel-polyfill babel-preset-env

Babylon.js

Babylon.jsをインストールします。

$ npm install --save babylonjs

設定ファイル

webpack.config.js

webpack.config.jsを作ったら、以下を記述します。

webpack.config.js
module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname+ '/build',
    filename: 'bundle.js',
  },
  module: {
    loaders: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        }
    ]
  },
  devServer: {
    contentBase: 'build',
    port: 8000
  },
};

package.json

package.jsonを開いて、scriptsに以下の通り追記します。

package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build": "webpack"
  },

index.htmlの作成

buildディレクトリにindex.htmlを作成します。以下のようにbundle.jsを読み込んでいる必要があります。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

app.jsの作成

srcディレクトリにapp.jsを作成します。app.jsに書いたコードがBabelによってトランスパイル、webpackによってバンドルされ、bundle.jsがbuildディレクトリに生成されることになります。

Babylon.jsを使ってみる。

index.html

bodyの中にcanvasを追加します。idはrenderCanvasとします。

index.html
<!-- 省略 -->
<body>
  <canvas id="renderCanvas"></canvas>
  <script src="bundle.js"></script>
</body>
<!-- 省略 -->

Babylon.jsのチュートリアルを実装してみましょう。

app.js
import BABYLON from 'babylonjs';

// Get the canvas element from our HTML below
var canvas = document.querySelector("#renderCanvas");
// Load the BABYLON 3D engine
var engine = new BABYLON.Engine(canvas, true);
// -------------------------------------------------------------
// Here begins a function that we will 'call' just after it's built
var createScene = function () {
    // Now create a basic Babylon Scene object
    var scene = new BABYLON.Scene(engine);
    // Change the scene background color to green.
    scene.clearColor = new BABYLON.Color3(0, 1, 0);
    // This creates and positions a free camera
    var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
    // This targets the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());
    // This attaches the camera to the canvas
    camera.attachControl(canvas, false);
    // This creates a light, aiming 0,1,0 - to the sky.
    var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
    // Dim the light a small amount
    light.intensity = .5;
    // Let's try our built-in 'sphere' shape. Params: name, subdivisions, size, scene
    var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);
    // Move the sphere upward 1/2 its height
    sphere.position.y = 1;
    // Let's try our built-in 'ground' shape. Params: name, width, depth, subdivisions, scene
    var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);
    // Leave this function
    return scene;
}; // End of createScene function
// -------------------------------------------------------------
// Now, call the createScene function that you just finished creating
var scene = createScene();
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
    scene.render();
});
// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
    engine.resize();
});

サーバ起動

以下のコマンドでサーバを起動します。

$ npm start

http://localhost:8000/ にアクセスして3Dグラフィックが表示されていれば成功です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした