Skip to content

G
games
Commit b8bbe6c7 authored by 熊东起's avatar 熊东起
Browse files
Options

flex:--11

parents
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 459 additions and 0 deletions
.DS_Store 0 → 100644
View file @ b8bbe6c7
File added
index.html 0 → 100644
View file @ b8bbe6c7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01.babylon_demo1</title>
<style>
html,
body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<script src="output.js"></script>
<script>
var canvas = document.getElementById("renderCanvas");
new Main(canvas);
</script>
</body>
</html>
\ No newline at end of file
package.json 0 → 100644
View file @ b8bbe6c7
{
"name": "babylon_demo1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.prod.js",
"dev": "webpack-dev-server --open --config webpack.dev.js --host 0.0.0.0"
},
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "4.0.0",
"typescript": "^4.2.4",
"webpack": "^4.1.0",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.0",
"webpack-merge": "^4.1.2"
},
"dependencies": {
"babylonjs": "^4.2.0",
"babylonjs-loaders": "^4.2.0"
}
}
src/.DS_Store 0 → 100644
View file @ b8bbe6c7
File added
src/Main.ts 0 → 100644
View file @ b8bbe6c7
import { GameScene } from './game/GameScene';
import { GameMgr } from './game/GameMgr';
import * as BABYLON from 'babylonjs';
export class Main {
private engine: BABYLON.Engine;//3d引擎
private scene: BABYLON.Scene;
private gameScene: GameScene;
constructor(canvas: HTMLCanvasElement) {
const self = this;
this.engine = new BABYLON.Engine(canvas, true);
GameMgr.Ins.canvas = canvas;
this.scene = GameMgr.Ins.createScene(this.engine);
this.engine.runRenderLoop(() => {
this.scene.render();
});
// /** 加载模型 */
// BABYLON.SceneLoader.Append("./assets","player.obj",this.scene,()=>{
// });
//场景
this.gameScene = new GameScene();
this.gameScene.initScene();
// 监听浏览器改变大小的事件，通过调用engine.resize()来自适应窗口大小
window.addEventListener("resize", function () {
self.engine.resize();
});
}
}
\ No newline at end of file
src/assets/file.obj 0 → 100644
View file @ b8bbe6c7
This diff is collapsed.
src/game/Box.ts 0 → 100644
View file @ b8bbe6c7
/**
* Created by _xdq on 2021/05/26.
* 盒子
*/
import * as BABYLON from 'babylonjs';
import { GameMgr } from './GameMgr';
import { BoxType } from './types';
export class Box<T extends BoxType> {
private _name: string;
box: BABYLON.Mesh;
constructor(name: string) {
this._name = name;
}
/** 初始化盒子 */
initBox(options: T) {
const {
width, height, depth, position, material
} = options;
const box = BABYLON.MeshBuilder.CreateBox(this._name, {
width, height, depth
}, GameMgr.Ins.scene);
this.box = box;
this.box.position = position;
this.box.material = material;
}
}
\ No newline at end of file
src/game/Camera.ts 0 → 100644
View file @ b8bbe6c7
/**
* Created by _xdq on 2021/05/26.
* 相机类
*/
import * as BABYLON from 'babylonjs';
import { GameMgr } from "./GameMgr";
export class Camera {
/** 弧形相机 */
private arcCamera: BABYLON.ArcRotateCamera;
/** canvas */
private canvas: HTMLCanvasElement;
constructor(){
this.canvas = GameMgr.Ins.canvas;
}
/** 初始化弧形相机 */
initArcCamera(position: BABYLON.Vector3) {
this.arcCamera = new BABYLON.ArcRotateCamera("arcCamera", 1, 1.4, 200, position.clone(), GameMgr.Ins.scene);
this.arcCamera.attachControl(this.canvas);
}
}
\ No newline at end of file
src/game/GameCfg.ts 0 → 100644
View file @ b8bbe6c7
/**
* Created by _xdq on 2021/05/26.
* 关卡地图
*/
export class GameCfg {
/**
* 0 无 1 墙壁 2 地板 3 箱子 4 箱子终点 5 人
*
* @static
* @type {{ [key: string]: number[][] }}
* @memberof GameCfg
*/
static readonly LEVEL: { [key: string]: number[][] } = {
LV_1: [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 4, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 3, 2, 3, 4, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 4, 2, 3, 5, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 3, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 4, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
]
}
}
\ No newline at end of file
src/game/GameMgr.ts 0 → 100644
View file @ b8bbe6c7
/**
* Created by _xdq on 2021/05/26.
* 游戏管理
*/
import * as BABYLON from 'babylonjs';
export class GameMgr {
private static _instance: GameMgr;
static get Ins(): GameMgr {
if (!this._instance) {
this._instance = new GameMgr();
}
return this._instance;
}
/** 场景 */
public scene: BABYLON.Scene;
/** 创建一个场景 */
public createScene(engine: BABYLON.Engine, options?: BABYLON.SceneOptions): BABYLON.Scene {
const scene: BABYLON.Scene = new BABYLON.Scene(engine, options);
this.scene = scene;
return scene;
}
/** 相机 */
public canvas: HTMLCanvasElement;
}
\ No newline at end of file
src/game/GameScene.ts 0 → 100644
View file @ b8bbe6c7
/**
* Created by _xdq on 2021/05/26.
* 主场景
*/
import { Box } from "./Box";
import { Camera } from "./Camera";
import { GameMgr } from "./GameMgr";
import { MaterialMgr } from "./MaterialMgr";
import * as BABYLON from 'babylonjs';
import { Light } from "./light";
import { GameCfg } from "./GameCfg";
import "babylonjs-loaders";
export class GameScene {
private camera: Camera;
private light: Light;
constructor() {
/** 相机类 */
this.camera = new Camera();
/** 灯光 */
this.light = new Light();
this.light.initLight();
/** 初始化场景 */
this.initScene();
}
/**
* 初始化场景
* @memberof GameScene
*/
initScene() {
/** 地面 */
const ground = BABYLON.MeshBuilder.CreateGround("myGround", {
width: 100,
height: 100
}, GameMgr.Ins.scene);
//地图
GameCfg.LEVEL.LV_1.forEach((clumn, index1) => {
clumn.forEach((row, index2) => {
if (row == 1) {
const box = new Box("box");
box.initBox({
width: 4,
height: 4,
depth: 4,
position: new BABYLON.Vector3(index1 * 4 - 40 + 2, 2, index2 * 4 - 40 + 2),
material: MaterialMgr.Ins.materials["wallMaterial"]
});
}
if (row == 3) {
const box = new Box("box");
box.initBox({
width: 4,
height: 2,
depth: 4,
position: new BABYLON.Vector3(index1 * 4 - 40 + 2, 1, index2 * 4 - 40 + 2),
material: MaterialMgr.Ins.materials["boxMaterial"]
});
}
if (row == 4) {
const plane = BABYLON.MeshBuilder.CreatePlane("plane", {
width: 4,
height: 4
}, GameMgr.Ins.scene);
plane.position = new BABYLON.Vector3(index1 * 4 - 40 + 2, 0.1, index2 * 4 - 40 + 2)
plane.material = MaterialMgr.Ins.materials["endMaterial"];
plane.rotation.x = 90 * Math.PI / 180;
}
if (row == 5) {
// const player = BABYLON.MeshBuilder.CreateSphere("player", {
// diameter: 2
// }, GameMgr.Ins.scene);
// player.position = new BABYLON.Vector3(index1 * 4 - 40 + 2, 1, index2 * 4 - 40 + 2)
// player.material = MaterialMgr.Ins.materials["playerMaterial"];
BABYLON.SceneLoader.ImportMesh("", "src/assets/", "file.obj", GameMgr.Ins.scene, function (newMeshes) {
console.log("999---->>>",newMeshes)
newMeshes.forEach((item,index) => {
item.scaling.x = 0.3;
item.scaling.y = 0.3;
item.scaling.z = 0.3;
item.position = new BABYLON.Vector3(index1 * 4 - 40 + 2, 0, index2 * 4 - 40 + 2);
});
});
}
});
});
this.camera.initArcCamera(new BABYLON.Vector3(0, 0, 0));
}
}
\ No newline at end of file
src/game/MaterialMgr.ts 0 → 100644
View file @ b8bbe6c7
/**
* Created by _xdq on 2021/05/26.
* 材质类
*/
import * as BABYLON from 'babylonjs';
import { GameMgr } from "./GameMgr";
export class MaterialMgr {
private static _instance: MaterialMgr;
static get Ins(): MaterialMgr {
if (!this._instance) {
this._instance = new MaterialMgr();
}
return this._instance;
}
/** 材质组 */
public materials: { [key: string]: BABYLON.StandardMaterial };
constructor() {
/** 墙壁材质 */
var wallMaterial = new BABYLON.StandardMaterial("wallMaterial", GameMgr.Ins.scene);
wallMaterial.diffuseTexture = new BABYLON.Texture("//yun.duiba.com.cn/spark/assets/5fe60952f141c695902a1a7428bc4bb1c254627c.jpeg", GameMgr.Ins.scene);
wallMaterial.alpha = 1
wallMaterial.diffuseTexture.hasAlpha = true;
/** 箱子材质 */
var boxMaterial = new BABYLON.StandardMaterial("boxMaterial", GameMgr.Ins.scene);
boxMaterial.diffuseTexture = new BABYLON.Texture("//yun.duiba.com.cn/spark/assets/c68150a7c6c0aaa9c88d64ac4ea51f26d9dfb386.jpeg", GameMgr.Ins.scene);
boxMaterial.alpha = 1
boxMaterial.diffuseTexture.hasAlpha = true;
/** 终点材质 */
var endMaterial = new BABYLON.StandardMaterial("endmaterial", GameMgr.Ins.scene);
endMaterial.diffuseTexture = new BABYLON.Texture("//yun.duiba.com.cn/spark/assets/9aa5d0732bea222d58347bf435e7f67a851b9fc1.png", GameMgr.Ins.scene);
endMaterial.alpha = 1
endMaterial.diffuseTexture.hasAlpha = true;
endMaterial.emissiveColor = new BABYLON.Color3(1,1,1)
/** 人物材质 */
var playerMaterial = new BABYLON.StandardMaterial("playermaterial", GameMgr.Ins.scene);
playerMaterial.diffuseColor = new BABYLON.Color3(1, 1, 1);
this.materials = {
wallMaterial,
boxMaterial,
endMaterial,
playerMaterial
}
}
}
\ No newline at end of file
src/game/light.ts 0 → 100644
View file @ b8bbe6c7
/**
* Created by _xdq on 2021/05/26.
* 灯光
*/
import { GameMgr } from "./GameMgr";
import * as BABYLON from 'babylonjs';
export class Light {
private pointLight: BABYLON.PointLight;
constructor() {
}
/** 初始化灯光 */
initLight() {
var pointerLight = new BABYLON.PointLight("point", new BABYLON.Vector3(0, 100, 100), GameMgr.Ins.scene);
this.pointLight = pointerLight;
}
}
\ No newline at end of file
src/game/types.ts 0 → 100644
View file @ b8bbe6c7
/**
* Created by _xdq on 2021/05/26.
*/
import * as BABYLON from 'babylonjs';
export interface BoxType {
width: number,
height: number,
depth: number,
position?: BABYLON.Vector3,
material: BABYLON.StandardMaterial
}
\ No newline at end of file
tsconfig.json 0 → 100644
View file @ b8bbe6c7
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"removeComments": true,
"preserveConstEnums": true,
"moduleResolution": "node",
"outDir": "dist",
"rootDir": ".",
"sourceMap": false,
"typeRoots": [
"./node_modules/babylonjs",
"./node_modules/@types",
"./node_modules/typestate/dist"
],
"types":[
"babylonjs"
],
},
"include": [
"src/**/*"
]
}
\ No newline at end of file
webpack.common.js 0 → 100644
View file @ b8bbe6c7
const path = require('path');
module.exports = {
entry: './src/main.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'output.js',
path: __dirname,
libraryTarget: 'umd',
}
};
\ No newline at end of file
webpack.dev.js 0 → 100644
View file @ b8bbe6c7
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: "development",
devtool: 'eval-source-map',
devServer: {
contentBase: '.',
port: 9000,
hot: true
}
});
\ No newline at end of file
webpack.prod.js 0 → 100644
View file @ b8bbe6c7
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const webpack = require('webpack');
module.exports = merge(common, {
mode: "production",
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment