Babylon.jsをTypeScriptで書いてwebpackを使ってWebGLを使うときのボイラープレート
概要
想定読者
- Webで3Dを書くためのBabylon.jsに興味がある方
-
TypeScriptでBabylon.jsを使ってみたい方
-
npm, webpackなどのJavaScriptのエコシステムについて基本的な知識がある方
前提
node, npmが使えることが必要です。
使用するnpmモジュールは、下記のとおりです。
"babylonjs": "^4.0.3",
"babylonjs-gui": "^4.0.3",
"babylonjs-materials": "^4.0.3",
"ts-loader": "^6.0.4",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.8"
利用するソース
下記に置きました。エントリ執筆時点のタグは0.0.1です。
https://github.com/hrkt/babylonjs-typescript-webpack-boilerplate/releases/tag/0.0.1
動かすには
git clone https://github.com/hrkt/babylonjs-typescript-webpack-boilerplate.git
npm install
npm run watch
git clone https://github.com/hrkt/babylonjs-typescript-webpack-boilerplate.git
npm install
npm run watch
ブラウザでindex.htmlを開くと、下図のような画面が見えるはずです。
説明
基本的に、「https://doc.babylonjs.com/features/npm_support」の内容を利用しています。
変更点について、適宜「(差分)」として補足します。
tsconfig.json
(差分)
- TypeScript用の設定ファイルのtsconfig.jsonでは、compilerOptionsで、"module": "es2015"としています。
- 対象とするファイル、しないファイルについて、それぞれincludeとexcludeの項目で指定しています。
{
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "es2015",
"outDir": "js",
"sourceMap": true,
"types": [
"babylonjs",
"babylonjs-gui",
"babylonjs-materials"
]
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.js"
]
}
webpack.config.js
(差分)
- WebPack用の設定ファイルのwebpack.config.jsでは、node_modules以下のファイルを別のバンドルとしてビルドする設定を入れています。
- 冒頭で、必要なモジュールのrequireを行っています。
const path = require('path')
const webpack = require("webpack")
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "initial",
}
}
}
},
mode: "development",
entry: {
app: './src/app.ts'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
devtool: 'source-map',
plugins: [
],
module: {
rules: [{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/
}]
}
}
描画用のソース
https://doc.babylonjs.com/のトップにサンプルが置かれています。
(差分)
- 描画用のクラス(MySceneとしました)を別ファイルとし、app.jsでは描画用クラスの読み込みと初期化だけ実施しています。
import MyScene from './my-scene'
window.addEventListener('DOMContentLoaded', () => {
// Create the game using the 'renderCanvas'.
let game = new MyScene('renderCanvas');
// Create the scene.
game.createScene();
// Start render loop.
game.doRender();
});
おわりに
一通り作ってみてから、まあ、こういうのはいろんな人がやってるだろうな、、と思って検索してみたら、やはり複数件ありました。
Googleでの先頭3件くらいを以下に転記しておきます。
Author And Source
この問題について(Babylon.jsをTypeScriptで書いてwebpackを使ってWebGLを使うときのボイラープレート), 我々は、より多くの情報をここで見つけました https://qiita.com/hrkt/items/17d2833ff3e3a4e158be著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .