如何用Three.js React打造一个3D开放世界小游戏的？

本文共计674个文字，预计阅读时间需要3分钟。

目录+背景+效果+设计+实现+加载资源+页面结构+数据初始化+场景初始化+创建世界+创建星空+创建地形+加载进度管理+创建本地模型+创建阿房模型+控制阿房运动+动画更新+页面缩放适配+添加

目录

• 背景
• 效果
• 设计
• 实现
• 加载资源
• 页面结构
• 数据初始化
• 场景初始化
• 创建世界
• 创建星空
• 创建地形
• 加载进度管理
• 创建基地模型
• 创建阿狸模型
• 控制阿狸运动
• 动画更新
• 页面缩放适配
• 添加游戏逻辑
• 毛玻璃效果
• 总结

背景

2545光年之外的开普勒1028星系，有一颗色彩斑斓的宜居星球，星际移民必须穿戴基地发放的防辐射服才能生存。阿狸驾驶星际飞行器降临此地，快帮它在限定时间内使用轮盘移动找到基地获取防辐射服吧！

本文使用Three.js + React + CANNON技术栈，实现通过滑动屏幕控制模型在3D世界里运动的Low Poly低多边形风格小游戏。本文主要涉及到的知识点包括：Three.js阴影类型、创建粒子系统、cannon.js基本用法、使用cannon.js高度场Heightfield创建地形、通过轮盘移动控制模型动画等。

效果

• 游戏玩法：点击开始游戏按钮，通过操作屏幕底部轮盘来移动阿狸，在倒计时限定时间内找到基地。
• 主线任务：限定时间内找到庇护所。
• 支线任务：自由探索开放世界。

在线预览：

• 地址1：3d-eosin.vercel.app/#/metaverse
• 地址2：dragonir.github.io/3d/#/metaverse

已适配:

• PC端
• 移动端

小提示：站得越高看得越远，隐隐约约听说基地位于初始位置的西面，开始时应该向左前方前进哦。

设计

游戏流程如下图所示：页面加载完成后玩家点击开始按钮，然后在限定时间内通过控制页面底部轮盘