這是學習babylogjs的
建立基本的專案結構(參考)[https://reddotblues.medium.com/babylon-js-typescript-project-setup-for-the-impatient-d8c71b4a57ad]
npm init
npm install --save-dev typescript webpack ts-loader webpack-cli
npm install babylonjs --save
npm install babylonjs-gui --save
建立檔案webpack.config.js
const path = require('path')
module.exports = {
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/
}]
}
}建立tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
"sourceMap": true,
"outDir": "./dist",
"types": [
"babylonjs",
"babylonjs-gui",
]
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.js"
]
}修改package.json
"scripts": {
"build": "webpack",
"watch": "webpack -w",
"test": "echo \"Error: no test specified\" && exit 1"
},建立index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Six</title>
<style>
html,body {overflow: hidden;width: 100%;height: 100%;margin: 0;padding: 0;}
#renderCanvas {width: 100%;height: 100%;touch-action: none;}
</style>
</head>
<body>
<canvas id="renderCanvas" touch-action="none"></canvas>
<script src="dist/app.js"></script>
</body>
</html>
建立src資料夾和app.ts
tobuild
npm run build
自動
npm run watch