diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..2cba4cf
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,80 @@
+# ---> Node
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# FuseBox cache
+.fusebox/
+
+package-lock.json
+dist/
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
diff --git a/package.json b/package.json
new file mode 100755
index 0000000..f20e341
--- /dev/null
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+ "name": "study_babylon",
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.html",
+ "scripts": {
+ "dev": "webpack-dev-server",
+ "build": "webpack",
+ "watch": "webpack --watch",
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "http://dev.deeploving.cn/blobt/study_babylon.git"
+ },
+ "keywords": [],
+ "author": "",
+ "license": "ISC",
+ "devDependencies": {
+ "ts-loader": "^7.0.5",
+ "typescript": "^3.9.3",
+ "webpack": "^4.43.0",
+ "webpack-cli": "^3.3.11",
+ "webpack-dev-server": "^3.11.0"
+ },
+ "dependencies": {
+ "babylonjs": "^4.1.0"
+ }
+}
diff --git a/src/index.html b/src/index.html
new file mode 100755
index 0000000..1ea9083
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ Study BabylonJs
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
new file mode 100755
index 0000000..29c6e0d
--- /dev/null
+++ b/src/main.ts
@@ -0,0 +1,9 @@
+import BasicScene from "./scene";
+
+
+
+var canvas: HTMLCanvasElement = document.getElementById("renderCanvas");
+
+
+var scene: BasicScene = new BasicScene(canvas);
+scene.renderLoop();
\ No newline at end of file
diff --git a/src/scene.ts b/src/scene.ts
new file mode 100755
index 0000000..ffa4c16
--- /dev/null
+++ b/src/scene.ts
@@ -0,0 +1,94 @@
+import {
+ Engine,
+ Scene,
+ Camera,
+ HemisphericLight,
+ DynamicTexture,
+ Mesh,
+ StandardMaterial,
+ Color3,
+ Vector3,
+ ArcRotateCamera,
+ MeshBuilder
+} from 'babylonjs';
+
+
+export default class BasicScene {
+ public canvas: HTMLCanvasElement;
+ public engine: Engine;
+ public scene: Scene;
+ public camera: Camera;
+
+ public constructor(canvas: HTMLCanvasElement) {
+ this.canvas = canvas;
+ this.engine = new Engine(this.canvas, true);
+ this.scene = new Scene(this.engine);
+ this.camera = new ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 8, new Vector3(0, 0, 0), this.scene);
+ this.camera.attachControl(this.canvas, true);
+ }
+
+ private _decorate(): void {
+ this.showWorldAxis(3);
+ const light = new HemisphericLight("light", new Vector3(0, 1, 0), this.scene);
+ //const box = MeshBuilder.CreateBox("box", {}, this.scene);
+
+ var origin: Vector3 = new Vector3(0, 0, 0);
+ var v1: Vector3 = new Vector3(1, 0.5, 0);
+ var v2: Vector3 = new Vector3(-0.5, 1, 0);
+
+ this.makeLine(origin,v1);
+ this.makeLine(origin,v2);
+ //this.makeLine(new Vector3(1, 1, 0),new Vector3(1, 1, 1));
+
+
+ }
+
+ private makeLine(start: Vector3, end: Vector3): void {
+ var axisX = Mesh.CreateLines("lines", [start, end], this.scene);
+ axisX.color = new Color3(1, 1, 1);
+ }
+
+ public renderLoop(): void {
+ this._decorate();
+ this.engine.runRenderLoop(() => {
+ this.scene.render();
+ });
+ }
+
+ private makeTextPlane(text: string, color: string, size: number): Mesh {
+ var dynamicTexture = new DynamicTexture("DynamicTexture", 50, this.scene, true);
+ dynamicTexture.hasAlpha = true;
+ dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color, "transparent", true);
+ var plane = Mesh.CreatePlane("TextPlane", size, this.scene, true);
+ var material: StandardMaterial = new StandardMaterial("TextPlaneMaterial", this.scene);
+ material.backFaceCulling = false;
+ material.specularColor = new Color3(0, 0, 0);
+ material.diffuseTexture = dynamicTexture;
+ plane.material = material;
+ return plane;
+ };
+
+ private showWorldAxis(size: number): void {
+ var axisX = Mesh.CreateLines("axisX", [
+ Vector3.Zero(), new Vector3(size, 0, 0), new Vector3(size * 0.95, 0.05 * size, 0),
+ new Vector3(size, 0, 0), new Vector3(size * 0.95, -0.05 * size, 0)
+ ], this.scene);
+ axisX.color = new Color3(1, 0, 0);
+ var xChar = this.makeTextPlane("X", "red", size / 10);
+ xChar.position = new Vector3(0.9 * size, -0.05 * size, 0);
+ var axisY = Mesh.CreateLines("axisY", [
+ Vector3.Zero(), new Vector3(0, size, 0), new Vector3(-0.05 * size, size * 0.95, 0),
+ new Vector3(0, size, 0), new Vector3(0.05 * size, size * 0.95, 0)
+ ], this.scene);
+ axisY.color = new Color3(0, 1, 0);
+ var yChar = this.makeTextPlane("Y", "green", size / 10);
+ yChar.position = new Vector3(0, 0.9 * size, -0.05 * size);
+ var axisZ = Mesh.CreateLines("axisZ", [
+ Vector3.Zero(), new Vector3(0, 0, size), new Vector3(0, -0.05 * size, size * 0.95),
+ new Vector3(0, 0, size), new Vector3(0, 0.05 * size, size * 0.95)
+ ], this.scene);
+ axisZ.color = new Color3(0, 0, 1);
+ var zChar = this.makeTextPlane("Z", "blue", size / 10);
+ zChar.position = new Vector3(0, 0.05 * size, 0.9 * size);
+ };
+};
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100755
index 0000000..651370d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "compilerOptions": {
+ "target": "es6",
+ "module": "commonjs",
+ "moduleResolution": "node"
+ }
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100755
index 0000000..252dffc
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,30 @@
+const path = require("path");
+module.exports = {
+ entry: "./src/main.ts", // 入口ts文件，名字可以任取，但是一定要注意路径设置是否正确
+ output: {
+ filename: "./bundle.js" // 自动会产生dist目录，所以可以去掉dist/目录
+ },
+ mode: 'development', // 本书中，设置为开发模式
+ devtool: "inline-source-map", // 如果要调试TypeScript源码，需要设置成这样
+ resolve: {
+ extensions: [".ts", ".js"] // 添加ts和js作为可解析的扩展
+ },
+ plugins: [
+ ],
+ module: {
+ rules: [
+ {
+ test: /\.ts$/, // 正则表达式，如果是TypeScript源码的话
+ loader: ["ts-loader"] // 则使用ts-loader来加载TypeScript源码，并进行转译
+ }
+ ]
+ },
+ devServer: { // 就是配置我们npm install webpack-dev-server --save-dev安装的那个服务器
+ contentBase: path.join(__dirname, "./dist/"), // 设置url的根目录，如果不设置，则默认是指向项目根目录(和设置./效果一样)
+ compress: true, //如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用
+ host: '0.0.0.0', // 设置主机名，默认为"localhost"
+ port: 3000, // 设置端口号,默认端口号为8080
+ historyApiFallback: true, //让所有404错误的页面定位到index.html
+ open: true //启动服务器时，自动打开浏览器，默认为false
+ }
+};
\ No newline at end of file