3D迷宫（二）babylon.js

最新推荐文章于 2023-10-19 15:48:07 发布

『空

最新推荐文章于 2023-10-19 15:48:07 发布

阅读量622

点赞数 2

文章标签：游戏 js javascript

本文链接：https://blog.csdn.net/XWxiaowei21/article/details/105645374

版权

3D（二）babylon.js续上一篇的文章。前面说到迷宫的算法，地图生成路线的代码如下：// 绘制地图数据 this.__proto__.MapDrawData = function(){ this.mapDrawData = []; for(let x = 0; x <= mapSize; x++){ for(let y = 0; y <=...

摘要由CSDN通过智能技术生成

3D迷宫（二）babylon.js

续上一篇的文章。

前面说到迷宫的算法，地图生成路线的代码如下：

// 绘制 地图 数据
			this.__proto__.MapDrawData = function(){
   
				this.mapDrawData = [];
				for(let x = 0; x <= mapSize; x++){
   
					for(let y = 0; y <= mapSize; y++){
   
						if(this.map[x][y] == mapInit){
   
							this.mapDrawData.push([[x,y],this.MapDataXY(x,y)]);
						}
					}
				}
			}
			//地图 数据 x y轴的走向
			this.__proto__.MapDataXY = function(x,y,n = -1){
   
				var list = [];
				this.map[x][y] = mapWall;
				if(n === -1){
   
					++y;
					n = 0;
					if(y < mapSize){
   
						list = this.JudgeGrid([[x,y]]);
					}
					
					if(list.length <= 0){
   
						n = 1;
						++x;
						--y;
						if(x > mapSize){
   
							--x;
							return [x,y];
						}
						list = this.JudgeGrid([[x,y]]);
						if(list.length <= 0){
   
							--x;
							return [x,y];
						}
					}
				}else{
   
					n === 0 ? ++y : ++x;
					if(x > mapSize){
   
						--x;
						return [x,y];
					}
					if(y > mapSize){
   
						--y;
						return [x,y];
					}
					list = this.JudgeGrid([[x,y]]);
					if(list.length <= 0){
   
						n === 0 ? --y : --x;
						return [x,y];
					}
				}
				list = this.MapDataXY(x,y,n);
				return list;
			}

突然感觉还可以用更简单的方式来做，大学白上了。

3D迷宫代码，如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>3D 迷宫游戏 -- 3D MazeGame</title>
	<script src="./js/babylon.js"></script>
    <script src="./js/mazeMapData.js"></script>
    <script src="./js/babylon.gui.js"></script>
    <style>
        html, body {
   overflow: hidden;width: 100%;height: 100%;margin: 0;padding: 0;}
        #renderCanvas {
   width: 100%;height: 100%;touch-action: none;}
    </style>
</head>
<body>
	<canvas id="renderCanvas"></canvas>
	<script type="text/javascript">
		window.addEventListener('DOMContentLoaded',function(){
   
			//**********************************
			let publicMethod = function(name,data){
   
				this[name] = this[name] || data;
			}
			publicMethod.prototype = {
   
				// 随机
				random: function(mix,max){
   
					return Math.floor(Math.random()*(mix - max) + max);
				}
			}
			//**********************************
			// 灯光
			let createLightClass = function (){
   
				this.light = this.light || [];
			}
			createLightClass.prototype = {
   
				// 定向光
				directional: function(scene,name){
   
					let light = new BABYLON.PointLight(name, new BABYLON.Vector3(100,50, 50), scene);
					light.intensity = 0.5;
					this.light[name] = light;
				},
				// 半球光
				hemispheric: function(scene,name){
   
					let light = new BABYLON.HemisphericLight(name, new BABYLON.Vector3(0, 100, 50),scene);
					light.diffuse = new BABYLON.Color3(0.97, 0.92, 0.45);
					light.specular = new BABYLON.Color3(1, 0.15, 0, 0.71);
					light.intensity = 0.4;
					this.light[name] = light;
				}
			}
			//**********************************
			// 相机
			let createCameraClass = function(wallSize){
   
				this.camera = this.camera || [];
				this.wallSize = wallSize;
			}
			createCameraClass.prototype = {
   
				// 第一人称
				firstPerspective: function(scene,name,canvas){
   
					let camera;
					camera = new BABYLON.DeviceOrientationCamera(name,new BABYLON.Vector3(this.wallSize / 2 + this.wallSize,100, this.wallSize + this.wallSize / 2),scene);
					// 地图区域
					camera.viewport = new BABYLON.Viewport(0, 0, 1, 1);
					// 设置相机移动按键
					camera.keysDown = [83,40];
					camera.keysLeft = [65,37];
					camera.keysRight = [68,39];
					camera.keysUp = [87,38];
					// 相机应用重力
					camera.applyGravity = true;
					// 相机碰撞
					camera.checkCollisions = true;
					// 相机碰撞 半径
					camera.collisionRadius = new BABYLON.Vector3(0.5, 0.5, 0.5)
					// 相机椭圆体
					camera.ellipsoid = new BABYLON.Vector3(3, 3, 3);
					// // 解决掉落不移动 则停止掉落
					camera.needMoveForGravity = true;

					camera.attachControl(canvas,true);
					scene.activeCameras.push(camera);

					this.camera[name

最低0.47元/天解锁文章

『空

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
3D迷宫（二）babylon.js

3D（二）babylon.js续上一篇的文章。前面说到迷宫的算法，地图生成路线的代码如下：// 绘制地图数据 this.__proto__.MapDrawData = function(){ this.mapDrawData = []; for(let x = 0; x <= mapSize; x++){ for(let y = 0; y <=...
复制链接

扫一扫