threejs——开发一款塔防游戏

---

theme: fancy

前言

完成效果

gif 图较大，耐心等待，源码见文末

为了上班摸鱼合理的玩游戏，我写了一个3d塔防游戏，其中功能包含动画、敌人运动、放置武器、升级武器、销毁武器、动态检测等功能。请动动小手，点赞收藏，这就发车~

目录结构

思维导图

具体功能和思路如下

有了这个思维导图，就可以按部就班，一步一步的实现游戏功能

技术栈

• typescript
• vite
• threejs
• astarjs

由于项目体系较大，内容覆盖较广，下面挑几个关键内容介绍一下

地图

首先要加载一个地图，地图功能包含可放置模块，不可放置模块(敌人路线，装饰元素)，大概思路就是根据floorSize生成一个长和宽相等的地图，每个地图都是一个plane。

```ts const createPlane = (texture: THREE.Texture): THREE.Mesh => { const geometry = new THREE.PlaneGeometry(1, 1); const material = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide }); let plane = new THREE.Mesh(geometry, material); plane.rotation.x = Math.PI * 0.5;

plane.material.map = texture;
plane.material.needsUpdate = true;
castShadow(plane)
return plane

} ```

生成轨迹

第一步用for循环，生成一个二维数组存放在mapUseV2中，设定一个起点const startPoint = new THREE.Vector2(0, 0)和终点const endPoint = new THREE.Vector2(floorSize - 1, floorSize - 1)，用于生成敌人运动轨迹。

生成轨迹的代码

```ts const maps = new (window as any).Graph(mapUseV2); // 夸过阻碍的随机点位，生成怪物的路线图 var starPosition = maps.grid[startPoint.x][startPoint.y]; var endPosition = maps.grid[endPoint.x][endPoint.y];

// 计算路线图 let trailPoints = (window as any).astar.search(maps, starPosition, endPosition, { closest: false });

``` 寻路生成后的数据结构如下