【3d游戏开发】使用Babylonjs+Vue3搭建属于我们的小岛

语言: CN / TW / HK
时间 2023-02-27 20:15:15

本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！

事情是这样的

有一天，我和我的小伙伴，深佬没事聊天，忽然就聊起了游戏开发，我们都对仙侠题材颇为感兴趣，于是我们一拍即合，决定做一个。

image.png

那么用什么开发？2d我熟，但是需要大量的美术资源，我们一时间做不了，所以我们只能想一个办法，一个可以把游戏做出来，同时资源什么的还容易弄的，交互还好的，于是想来想去，还是我的世界这种更加的适合，于是开始搞，使用Babylonjs，我们用了很短的时间，就把游戏的基本部分搞好了。

image.png

于是我把整个过程沉淀出来，分享给大家，，贡献出我们的力量，希望能有所帮助。

游戏在线预览地址，点这里，使用vue3+vite写的。

游戏源码仓库地址，点这里，放到了github上。

速通babylon基础功能

那么我们快速过一遍，基础的功能点。

创建场景

在游戏中，我们的内容都呈现在场景里，那么接下来，就介绍一下场景的创建过程

创建并获得canvas节点

html ```html

**JS**js let canvas = document.getElementById("renderCanvas"); ```

创建一个engine引擎

有了canvas就能创建engine了

那么，引擎是什么？

对WebGL，audio等底层api进行封装，整合出更简便易用的接口。

代码实现 js var createDefaultEngine = function () { return new BABYLON.Engine( canvas, true, { preserveDrawingBuffer: true, stencil: true, disableWebGL2Support: false }); }; 参数简单介绍一下 - 第一个参数：把上面的canvas节点传入即可 - 第二个参数：设置抗锯齿，默认是flase - 第三个参数：就是一些设置项，我直接用的官网例子中的配置方案，够用了。

可以创建场景了

有了engine，就能创建场景了

实例化一个场景 js const scene = new BABYLON.Scene(window.engine); 接下来为场景，加一个摄像机

那么，摄像机是啥？

我们看到的游戏画面，都是通过摄像机拍出来的，没有摄像机，就是漆黑一片。

代码实现： js 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渲染出来 js window.engine.runRenderLoop(function () { if (scene && scene.activeCamera) { scene.render(); } }); - runRenderLoop就是engine提供的渲染循环，传入一个渲染函数，那么引擎就会根据屏幕的刷新去回调这个函数（一秒会触发很多次这个函数，帧数越高，那么回调的次数就越多）。 - 传入的函数逻辑很简单：判断场景是否存在和场景中是否添加了摄像机，成立的话，就调用场景实例的render这个api。

创建一个盒模型，天空和光

有了场景，就能在里面加入模型，天空和光了

创建盒模型

js const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene); 效果图：

image.png

代码片段：http://code.juejin.cn/pen/7165452918270181384

蛤？怎么是漆黑的呢，能不能开下灯

创建光源

上面看到的黑色，并不是模型默认的颜色，而是没有光的缘故，那么我们开下灯。

代码实现： js 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表示最强光 - 参数概述 - 第一个参数是灯光实例的名称 - 第二个参数就是坐标

效果：

马上掘金地址：http://code.juejin.cn/pen/7165406393954992128

创建蓝天

目前的环境背景是这样的，如图：

image.png

不好看，所以我们要做一个蓝天，来当背景。

先创建天空盒子

代码实现： js this.skyBox = MeshBuilder.CreateBox( 'skyBox', { width: width, height: height, depth: 1000 }, this.scene );

给天空盒子加个材质，让他变成蓝天

那么，什么是材质？

材质，可以简单理解为，模型的面料，样子，贴图。

代码实现： js 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，看不到天空

效果：

ezgif.com-gif-maker (13).gif

代码片段：http://code.juejin.cn/pen/7165457880454266891

给盒模型添加材质

盒模型一共6个面，那么首先我们需要知道面的编号

效果如下：

ezgif.com-gif-maker (14).gif

代码片段：http://code.juejin.cn/pen/7165449658444021774

通过效果可知： - 0 前 - 1 后 - 2 左 - 3 右 - 4 上 - 5 下

那么这个编号对应的就是faceUV的索引

faceUV就是配置六个面显示的数组

js 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号面 ];

我们设置一下材质所用的贴图

grass_64.png

一张贴图如何切分给各个面 你需要了解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

image.png

  • 纵向从0也就是图片的最下方。到1，也就是最高点

image.png

经过测试，和我的猜想是一致的。

效果：

ezgif.com-gif-maker (12).gif

代码片段：http://code.juejin.cn/pen/7165083410501730334

那么这个盒子就会作为接下来游戏开发中必不可少的角色，实现陆地的基本单元，命名为草地区块grassBlock

游戏设计

首先游戏设计讲起来是很复杂很繁琐的，由于篇幅有限，我用一个轻巧的方式，把游戏开发的整体思路给大家串一下，这样对阅读项目源码会很有帮助，源码我会在文章底部贴出。

架构设计

架构图

image.png

职能划分

面向对象的思路，单纯的前端开发来看，大部分都是UI开发，这些用面向过程的思路来做，往往就能应对大部分场景。但是在游戏开发中，不用面向对象我觉得是不可以的，那可太费劲了，所以整体都是面向对象的思路。

大体分三层： - Vue显示层：关注的页面呈现，装载babylon和卸载的工作。 - Core核心层 - gameEngine：实现事件循环，也就是每帧要做的工作，激活运转gameWidow和gameLogic - gameWidow：管理浏览器原生事件相关，对键盘事件，触摸事件等的管理。 - gameLogic：主逻辑实现类，主要关注事件如何响应，创建游戏场景，设置重力，摄像机等游戏相关任务 - World原料层 - manager：管理器，针对同类别多种类的管理，统一管理创建，并对外提供接口获取所需的model对象（有点依赖注入的味道了，就像你去买苹果，你就不用一种苹果一种苹果的自己找，你直接找水果店老板，他就能告诉你什么好，什么适合，那么这个mananger就是干这个的） - models：模型层，作为组成单元被创建和组织，目前有模型盒子，材质单元，摄像机，大地图，天空，光源等。

image.png

项目结构

image.png

功能设计

创建地图，通过噪声算法

首先陆地的组成单位，就是上面我们创建好的草地区块grassBlock，我们需要通过一个个grassBlock拼出来我们的地图。

而噪声算法就是常见的用来生成地图的，直接拿来用，这里我简单说说为什么用噪声算法？

因为，我们需要一个办法，一个可以生成一个随机种子，往后通过这个种子就能生成固定的数据，并且具备连续性，数据是平滑的。

噪声算法算法就具备如下特点： - 随机性：创建的地图是随机的。 - 可哈希：简单说作用，就是地图我们都是渲染我们视野范围内的，我们要保证离开视野之后，返回地图还是跟之前一致，不能再随机了。 - 平滑，连续：随机出来的数据具有一点的连续性，不突兀，这样我们的地形就很平滑。

噪声算法代码如下： ```js 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坐标，就能获得高的函数。 ```js 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的坐标数据了。

贴出 ts 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

  • 但是画圆有点难度，不如我们用一个取巧的方式，画一个方形，然后写个判定是否在圆内的工具函数来进行筛选，岂不是更容易。

    • 先画出一个方形，然后在用算法过滤，就这么简单

那么根据思路，我们一个圆形区域就画出来了 image.png

镜头可以碰撞，移动，跳跃

镜头就是第一人称，就是我们游戏内容人物。

首先镜头不可以穿透模型，能够遇到地形就挺住，这就需要具备碰撞能力

镜头需要移动，那么我们就需要实现键盘或者触摸事件的监听，来响应操作

当操作开始的时候，我们就通过引擎的事件循环，来进行对摄像机的移动，或者跳跃的处理

跳跃不能一直跳，跳到天上去，所以我们需要加入重力，这样我们就可以让他具备了向下运动的基本特征。

那么根据思路，就实现了一个在地形上奔腾的场景了。

ezgif.com-gif-maker (11).gif

结尾

这仅仅是一个开始，未来我们会不断的加入新的元素，让我们的世界变的更精彩。

游戏在线预览地址，点这里，使用vue3+vite写的。

游戏源码仓库地址，点这里，放到了github上。

有问题，欢迎提问，我整了个群叫“闲D岛”，群号是551406017，问答群，有问题尽管问，欢迎交流。

「」
「」