blobt
4 years ago
8 changed files with 279 additions and 0 deletions
-
80.gitignore
-
0README.md
-
29package.json
-
30src/index.html
-
9src/main.ts
-
94src/scene.ts
-
7tsconfig.json
-
30webpack.config.js
@ -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/ |
||||
@ -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" |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,30 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Study BabylonJs</title> |
||||
|
<style> |
||||
|
html, |
||||
|
body { |
||||
|
overflow: hidden; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
#renderCanvas { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<canvas id="renderCanvas" touch-action="none"></canvas> |
||||
|
<script src="./bundle.js" type="text/javascript"></script> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,9 @@ |
|||||
|
import BasicScene from "./scene"; |
||||
|
|
||||
|
|
||||
|
|
||||
|
var canvas: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("renderCanvas"); |
||||
|
|
||||
|
|
||||
|
var scene: BasicScene = new BasicScene(canvas); |
||||
|
scene.renderLoop(); |
||||
@ -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); |
||||
|
}; |
||||
|
}; |
||||
@ -0,0 +1,7 @@ |
|||||
|
{ |
||||
|
"compilerOptions": { |
||||
|
"target": "es6", |
||||
|
"module": "commonjs", |
||||
|
"moduleResolution": "node" |
||||
|
} |
||||
|
} |
||||
@ -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
|
||||
|
} |
||||
|
}; |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue