本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！
事情是这样的
有一天，我和我的小伙伴，深佬没事聊天，忽然就聊起了游戏开发，我们都对仙侠题材颇为感兴趣，于是我们一拍即合，决定做一个。
那么用什么开发？2d我熟，但是需要大量的美术资源，我们一时间做不了，所以我们只能想一个办法，一个可以把游戏做出来，同时资源什么的还容易弄的，交互还好的，于是想来想去，还是我的世界这种更加的适合，于是开始搞，使用Babylonjs，我们用了很短的时间，就把游戏的基本部分搞好了。
于是我把整个过程沉淀出来，分享给大家，，贡献出我们的力量，希望能有所帮助。
游戏在线预览地址，点这里，使用vue3+vite写的。
游戏源码仓库地址，点这里，放到了github上。
速通babylon基础功能
那么我们快速过一遍，基础的功能点。
创建场景
在游戏中，我们的内容都呈现在场景里，那么接下来，就介绍一下场景的创建过程
创建并获得canvas节点
html
<body>
<canvas id="renderCanvas"></canvas>
</body>
JS
let canvas = document.getElementById("renderCanvas");
创建一个engine引擎
有了canvas就能创建engine了
那么，引擎是什么？
对WebGL，audio等底层api进行封装，整合出更简便易用的接口。
代码实现
var createDefaultEngine = function () {
return new BABYLON.Engine(
canvas,
true,
{
preserveDrawingBuffer: true,
stencil: true,
disableWebGL2Support: false
});
};
参数简单介绍一下
- 第一个参数：把上面的canvas节点传入即可
- 第二个参数：设置抗锯齿，默认是flase
- 第三个参数：就是一些设置项，我直接用的官网例子中的配置方案，够用了。
可以创建场景了
有了engine，就能创建场景了
实例化一个场景
const scene = new BABYLON.Scene(window.engine);
接下来为场景，加一个摄像机
那么，摄像机是啥？
我们看到的游戏画面，都是通过摄像机拍出来的，没有摄像机，就是漆黑一片。
代码实现：
this.vector = new Vector3(
this.option.start.x,
this.option.start.y,
this.option.start.z
);
this.camera = new FreeCamera("Camera", this.vector, this.scene);
- Camera的类型有几种，这里我拿
FreeCamera举例，因为我们做的游戏是第一人称，而这个FreeCamera非常适合。 - 参数有三个
- 第一个是相机实例的名称。
- 第二个是三维坐标。
- 第三个是要添加摄像机的场景，也就是我们刚刚创建的场景。
仅仅创建一个场景实例还不够，我们需要让engine引擎把scene渲染出来
window.engine.runRenderLoop(function () {
if (scene && scene.activeCamera) {
scene.render();
}
});
- runRenderLoop就是engine提供的渲染循环，传入一个渲染函数，那么引擎就会根据屏幕的刷新去回调这个函数（一秒会触发很多次这个函数，帧数越高，那么回调的次数就越多）。
- 传入的函数逻辑很简单：判断场景是否存在和场景中是否添加了摄像机，成立的话，就调用场景实例的
render这个api。
创建一个盒模型，天空和光
有了场景，就能在里面加入模型，天空和光了
创建盒模型
const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);
效果图：
代码片段：https://code.juejin.cn/pen/7165452918270181384
蛤？怎么是漆黑的呢，能不能开下灯
创建光源
上面看到的黑色，并不是模型默认的颜色，而是没有光的缘故，那么我们开下灯。
代码实现：
const light = new BABYLON.HemisphericLight(
"light",
new BABYLON.Vector3(0, 1, 0)
);
const light1 = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, -1, 0), scene);
light1.intensity = 0.5;
- 为啥要创建两个光源，并且第二个光源设置了intensity
- 因为光设置一个光源，会有一个面漆黑一片
- 设置第二个光源目的是让这面不黑
- 设置intensity目的是让底面看着暗一些，intensity表示强烈程度，0表示不发光，1表示最强光
- 参数概述
- 第一个参数是灯光实例的名称
- 第二个参数就是坐标
效果：
马上掘金地址：https://code.juejin.cn/pen/7165406393954992128
创建蓝天
目前的环境背景是这样的，如图：
不好看，所以我们要做一个蓝天，来当背景。
先创建天空盒子
代码实现：
this.skyBox = MeshBuilder.CreateBox(
'skyBox',
{
width: width,
height: height,
depth: 1000
},
this.scene
);
给天空盒子加个材质，让他变成蓝天
那么，什么是材质？
材质，可以简单理解为，模型的面料，样子，贴图。
代码实现：
let skyBox = BABYLON.MeshBuilder.CreateBox('SkyBox', {size:1000}, scene, false, BABYLON.Mesh.BACKSIDE);
skyBox.material = new BABYLON.SkyMaterial('sky', scene);
skyBox.material.inclination = -0.15;
skyBox.material.backFaceCulling = false
- 使用
BABYLON.MeshBuilder.CreateBox创建，- 第一个参数是模型的名字
- 第二个是参数，其中仅仅设置可size为1000，代表着，width（宽），hight（高），depth（深）同时设置了1000
- inclination表示太阳的日照，区间为[-0.5,0.5],
- backFaceCulling这个叫剔除，你不设置false，看不到天空
效果：
代码片段：https://code.juejin.cn/pen/7165457880454266891
给盒模型添加材质
盒模型一共6个面，那么首先我们需要知道面的编号
效果如下：
代码片段：https://code.juejin.cn/pen/7165449658444021774
通过效果可知：
- 0 前
- 1 后
- 2 左
- 3 右
- 4 上
- 5 下
那么这个编号对应的就是faceUV的索引
faceUV就是配置六个面显示的数组
let faceUV = [
new Vector4(1 / 4, 0, 2 / 4, 1), // 0号面
new Vector4(1 / 4, 0, 2 / 4, 1), // 1号面
new Vector4(2 / 4, 0, 3 / 4, 1), // 2号面
new Vector4(2 / 4, 0, 3 / 4, 1), // 3号面
new Vector4(0, 0, 1 / 4, 1), // 4号面
new Vector4(3 / 4, 0, 1, 1), // 5号面
];
我们设置一下材质所用的贴图
一张贴图如何切分给各个面 你需要了解Vector4，他的参数值是比例，参数都有：
- x
- y
- z
- w
em～～～，我其实也搞不懂，这个四维坐标是咋回事，但我将亲测出来的理解写下来，希望对你有用：
- x和z，横向来看，你可以理解x表示截取图片的开始，z表示结束
- y和w，纵向来看，你可以理解y是为截取图片的开始，w表示结束
那以 new Vector4(1 / 4, 0, 2 / 4, 1)这个为例，表示计算出截取图片的部分是：
- 横向从
1/4的位置到2 / 4
-
纵向从0也就是图片的最下方。到1，也就是最高点
经过测试，和我的猜想是一致的。
效果：
代码片段：https://code.juejin.cn/pen/7165083410501730334
那么这个盒子就会作为接下来游戏开发中必不可少的角色，实现陆地的基本单元，命名为草地区块grassBlock
游戏设计
首先游戏设计讲起来是很复杂很繁琐的，由于篇幅有限，我用一个轻巧的方式，把游戏开发的整体思路给大家串一下，这样对阅读项目源码会很有帮助，源码我会在文章底部贴出。
架构设计
架构图
职能划分
面向对象的思路，单纯的前端开发来看，大部分都是UI开发，这些用面向过程的思路来做，往往就能应对大部分场景。但是在游戏开发中，不用面向对象我觉得是不可以的，那可太费劲了，所以整体都是面向对象的思路。
大体分三层：
- Vue显示层：关注的页面呈现，装载babylon和卸载的工作。
- Core核心层
- gameEngine：实现事件循环，也就是每帧要做的工作，激活运转gameWidow和gameLogic
- gameWidow：管理浏览器原生事件相关，对键盘事件，触摸事件等的管理。
- gameLogic：主逻辑实现类，主要关注事件如何响应，创建游戏场景，设置重力，摄像机等游戏相关任务
- World原料层
- manager：管理器，针对同类别多种类的管理，统一管理创建，并对外提供接口获取所需的model对象（有点依赖注入的味道了，就像你去买苹果，你就不用一种苹果一种苹果的自己找，你直接找水果店老板，他就能告诉你什么好，什么适合，那么这个mananger就是干这个的）
- models：模型层，作为组成单元被创建和组织，目前有模型盒子，材质单元，摄像机，大地图，天空，光源等。
项目结构
功能设计
创建地图，通过噪声算法
首先陆地的组成单位，就是上面我们创建好的草地区块grassBlock，我们需要通过一个个grassBlock拼出来我们的地图。
而噪声算法就是常见的用来生成地图的，直接拿来用，这里我简单说说为什么用噪声算法？
因为，我们需要一个办法，一个可以生成一个随机种子，往后通过这个种子就能生成固定的数据，并且具备连续性，数据是平滑的。
噪声算法算法就具备如下特点：
- 随机性：创建的地图是随机的。
- 可哈希：简单说作用，就是地图我们都是渲染我们视野范围内的，我们要保证离开视野之后，返回地图还是跟之前一致，不能再随机了。
- 平滑，连续：随机出来的数据具有一点的连续性，不突兀，这样我们的地形就很平滑。
噪声算法代码如下：
class Random {
private seed: number;
// 实例化一个随机数生成器，seed=随机数种子，默认当前时间
constructor(seed?: number) {
this.seed = (seed || Date.now()) % 999999999;
}
// 返回0~1之间的数a
next() {
this.seed = (this.seed * 9301 + 49297) % 233280;
return this.seed / 233280.0;
}
// 返回0~max之间的数
nextInt(max: number) {
return Math.floor(this.next() * max);
}
}
export class PerlinNoiseGenerator {
private static readonly F2: number = 0.3660254037844386;
private static readonly G2: number = 0.21132486540518713;
private static readonly F3: number = 1.0 / 3.0;
private static readonly G3: number = 1.0 / 6.0;
private static readonly GRAD3: Array<Array<number>> = [
[1, 1, 0], [-1, 1, 0], [1, -1, 0], [-1, -1, 0],
[1, 0, 1], [-1, 0, 1], [1, 0, -1], [-1, 0, -1],
[0, 1, 1], [0, -1, 1], [0, 1, -1], [0, -1, -1],
[1, 0, -1], [-1, 0, -1], [0, -1, 1], [0, 1, 1]
];
private readonly PERM: Array<number> = [];
private readonly octaves: number;
private readonly persistence: number;
private readonly lacunarity: number;
constructor( seed: number, option: { octaves: number, persistence: number, lacunarity: number } ) {
this.octaves = option.octaves;
this.persistence = option.persistence;
this.lacunarity = option.lacunarity;
let random = new Random(seed);
for (let i = 0; i < 512; i++) {
this.PERM.push(random.nextInt(256));
}
}
private dot3(v1: Array<number>, v2: Array<number>): number {
return v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2];
}
private noise2(x: number, y: number): number {
let i1, j1, I, J;
let s = (x + y) * PerlinNoiseGenerator.F2;
let i = Math.floor(x + s);
let j = Math.floor(y + s);
let t = (i + j) * PerlinNoiseGenerator.G2;
let xx = [];
let yy = [];
let f = [];
let noise = [0.0, 0.0, 0.0];
let g = [];
xx[0] = x - (i - t);
yy[0] = y - (j - t);
i1 = xx[0] > yy[0] ? 1 : 0;
j1 = xx[0] <= yy[0] ? 1 : 0;
xx[2] = xx[0] + PerlinNoiseGenerator.G2 * 2.0 - 1.0;
yy[2] = yy[0] + PerlinNoiseGenerator.G2 * 2.0 - 1.0;
xx[1] = xx[0] - i1 + PerlinNoiseGenerator.G2;
yy[1] = yy[0] - j1 + PerlinNoiseGenerator.G2;
I = i & 255;
J = j & 255;
g[0] = this.PERM[I + this.PERM[J]] % 12;
g[1] = this.PERM[I + i1 + this.PERM[J + j1]] % 12;
g[2] = this.PERM[I + 1 + this.PERM[J + 1]] % 12;
for (let c = 0; c <= 2; c++) {
f[c] = 0.5 - xx[c] * xx[c] - yy[c] * yy[c];
}
for (let c = 0; c <= 2; c++) {
if (f[c] > 0) {
noise[c] = f[c] * f[c] * f[c] * f[c] *
(PerlinNoiseGenerator.GRAD3[g[c]][0] * xx[c] + PerlinNoiseGenerator.GRAD3[g[c]][1] * yy[c]);
}
}
return (noise[0] + noise[1] + noise[2]) * 70.0;
}
private noise3(x: number, y: number, z: number): number {
let c, o1, o2, g = [], I, J, K;
let f = [], noise = [0.0, 0.0, 0.0, 0.0];
let s = (x + y + z) * PerlinNoiseGenerator.F3;
let i = Math.floor(x + s);
let j = Math.floor(y + s);
let k = Math.floor(z + s);
let t = (i + j + k) * PerlinNoiseGenerator.G3;
let pos: Array<Array<number>> = [[], [], [], []];
pos[0][0] = x - (i - t);
pos[0][1] = y - (j - t);
pos[0][2] = z - (k - t);
if (pos[0][0] >= pos[0][1]) {
if (pos[0][1] >= pos[0][2]) {
o1 = [1, 0, 0];
o2 = [1, 1, 0];
} else if (pos[0][0] >= pos[0][2]) {
o1 = [1, 0, 0];
o2 = [1, 0, 1];
} else {
o1 = [0, 0, 1];
o2 = [1, 0, 1];
}
} else {
if (pos[0][1] < pos[0][2]) {
o1 = [0, 0, 1];
o2 = [0, 1, 1];
} else if (pos[0][0] < pos[0][2]) {
o1 = [0, 1, 0];
o2 = [0, 1, 1];
} else {
o1 = [0, 1, 0];
o2 = [1, 1, 0];
}
}
for (c = 0; c <= 2; c++) {
pos[3][c] = pos[0][c] - 1.0 + 3.0 * PerlinNoiseGenerator.G3;
pos[2][c] = pos[0][c] - o2[c] + 2.0 * PerlinNoiseGenerator.G3;
pos[1][c] = pos[0][c] - o1[c] + PerlinNoiseGenerator.G3;
}
I = i & 255;
J = j & 255;
K = k & 255;
g[0] = this.PERM[I + this.PERM[J + this.PERM[K]]] % 12;
g[1] = this.PERM[I + o1[0] + this.PERM[J + o1[1] + this.PERM[o1[2] + K]]] % 12;
g[2] = this.PERM[I + o2[0] + this.PERM[J + o2[1] + this.PERM[o2[2] + K]]] % 12;
g[3] = this.PERM[I + 1 + this.PERM[J + 1 + this.PERM[K + 1]]] % 12;
for (c = 0; c <= 3; c++) {
f[c] = 0.6 - pos[c][0] * pos[c][0] - pos[c][1] * pos[c][1] -
pos[c][2] * pos[c][2];
}
for (c = 0; c <= 3; c++) {
if (f[c] > 0) {
noise[c] = f[c] * f[c] * f[c] * f[c] * this.dot3(pos[c], PerlinNoiseGenerator.GRAD3[g[c]]);
}
}
return (noise[0] + noise[1] + noise[2] + noise[3]) * 32.0;
}
public simplex2(x: number, y: number): number {
let freq = 1.0;
let amp = 1.0;
let max = 1.0;
let total = this.noise2(x, y);
for (let i = 1; i < this.octaves; i++) {
freq *= this.lacunarity;
amp *= this.persistence;
max += amp;
total += this.noise2(x * freq, y * freq) * amp;
}
return (1 + total / max) / 2;
}
public simplex3(x: number, y: number, z: number): number {
let freq = 1.0;
let amp = 1.0;
let max = 1.0;
let total = this.noise3(x, y, z);
for (let i = 1; i < this.octaves; ++i) {
freq *= this.lacunarity;
amp *= this.persistence;
max += amp;
total += this.noise3(x * freq, y * freq, z * freq) * amp;
}
return (1 + total / max) / 2;
}
}
那么借助了噪声算法，我们就能够创建一个函数，传入x，z坐标，就能获得高的函数。
private getHeight(x: number, y: number): number {
let f = this.terrainPerlinNoise1.simplex2(x * 0.01, y * 0.01);
let g = this.terrainPerlinNoise2.simplex2(-x * 0.01, -y * 0.01);
let mh = g * 32;
let h = f * mh;
if (h <= 0) {
h = 0;
}
return Math.floor(h);
}
这样，我们只要遍历循环一个区域的x，z坐标传入这个函数获得y，就能获得一个区域内创建地图区块grassBlock的坐标数据了。
贴出
private initGroundBlocks(): void {
let position = this.camera.getCurrentPosition();
for (let i = 0; i < this.groundArrayLength; i++) {
if (this.groundBlocksData[i] == null) {
this.groundBlocksData[i] = [];
}
let a = 1;
for (let j = 0; j < this.groundArrayLength; j++) {
let x = position.x - this.visualField + i;
let z = position.z - this.visualField + j;
let y = this.getHeight(x, z);
let isInCircle = isPointInCircle(
{ a: i, b: -j },
{ a: this.visualField, b: -this.visualField },
this.visualField
);
let blocks = [];
if (isInCircle) {
let grassBlock = this.blockLib.getGrassBlock().clone();
grassBlock.setPosition(x, y, z);
blocks.push(grassBlock);
}
this.groundBlocksData[i][j] = {
x: x,
y: y,
z: z,
show: isInCircle,
blocks: blocks,
};
}
}
}
只渲染视野范围内的
既然创建地图的功能已经好了，我们就来制定渲染地图的规则
-
首先我们肯定不能全部渲染出来，我们需要渲染一部分，那么是哪一部分呢？
- 全部渲染出来，卡爆了
-
肯定是以摄像机这个第一视角为中心，以一个合适的视野距离画圆这个区域最为合理。
- 这个视野距离就会作为半径画圆，目前设置的是36，很流程，扫出来的区域也够大
-
也就是根据摄像机的中心坐标，开始计算一个圆形区域的坐标集合
- 这块就是简单的遍历一个圆内的坐标集合，间隔单位就是grassBlock的宽度默认为1
-
但是画圆有点难度，不如我们用一个取巧的方式，画一个方形，然后写个判定是否在圆内的工具函数来进行筛选，岂不是更容易。
- 先画出一个方形，然后在用算法过滤，就这么简单
那么根据思路，我们一个圆形区域就画出来了
镜头可以碰撞，移动，跳跃
镜头就是第一人称，就是我们游戏内容人物。
首先镜头不可以穿透模型，能够遇到地形就挺住，这就需要具备碰撞能力
镜头需要移动，那么我们就需要实现键盘或者触摸事件的监听，来响应操作
当操作开始的时候，我们就通过引擎的事件循环，来进行对摄像机的移动，或者跳跃的处理
跳跃不能一直跳，跳到天上去，所以我们需要加入重力，这样我们就可以让他具备了向下运动的基本特征。
那么根据思路，就实现了一个在地形上奔腾的场景了。
结尾
这仅仅是一个开始，未来我们会不断的加入新的元素，让我们的世界变的更精彩。
游戏在线预览地址，点这里，使用vue3+vite写的。
游戏源码仓库地址，点这里，放到了github上。
有问题，欢迎提问，我整了个群叫“闲D岛”，群号是551406017，问答群，有问题尽管问，欢迎交流。
今天的文章【3d游戏开发】使用Babylonjs+Vue3搭建属于我们的小岛分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/14166.html
