From 0fc458d34dc9f3c52d75d5ecd5d648acf1121a01 Mon Sep 17 00:00:00 2001 From: blobt Date: Mon, 23 Nov 2020 20:12:21 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E7=A1=80=E6=A1=86=E6=9E=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 80 ++++++++++++++++++++++++++++++++++++++++ README.md | 0 package.json | 29 +++++++++++++++ src/index.html | 30 +++++++++++++++ src/main.ts | 9 +++++ src/scene.ts | 94 +++++++++++++++++++++++++++++++++++++++++++++++ tsconfig.json | 7 ++++ webpack.config.js | 30 +++++++++++++++ 8 files changed, 279 insertions(+) create mode 100644 .gitignore mode change 100644 => 100755 README.md create mode 100755 package.json create mode 100755 src/index.html create mode 100755 src/main.ts create mode 100755 src/scene.ts create mode 100755 tsconfig.json create mode 100755 webpack.config.js 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