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