如何基于three.js(webgl)引擎架构,实现3D微信小游戏(第一课)

引言

在三维图形和游戏开发领域,three.js 作为一个基于 WebGL 的 JavaScript 库,提供了强大的功能来创建和显示动画化的 3D 计算机图形。它使得开发者能够轻松地在网页上构建复杂的 3D 场景和互动游戏。本文将作为一系列教程的第一课,介绍如何基于 three.js 引擎架构,开始实现一个简单的 3D 小游戏。

闲话少叙,亮个相吧!

一、代码结构说明

程序目录图:

主程序主要分为配置、入口、库、模型、多线程库、主代码以及资源。

其中 game.json;project.config.json;project.private.config.json;这三个文件是微信小程序游戏的配置文件

主入口在game.js中。

workers是js多线程的文件放在这里面,主要用来计算敌人位移攻击的一些算法。

units放了一些通用方法 数学计算等

models放了模型文件,包括主角模型,敌人模型 ,地图等

js是主要实现游戏的代码文件

images以及audio是资源文件库

二、效果展示

2.1、游戏启动,初始画面

主角站在门口,等待控制闯关。敌人会自动寻向主角

说明:由于gif图限制大小缘故,后面的gif录屏智能选择模糊版

2.2、控制主角移动

空过摇杆控制器控制主角跑动移动

2.3、控制主角攻击

通过点击右侧招式 控制小人主角发大招,有冷却 运功时间

2.4、敌人对战

可以踢腿,可以发大招

2.5、过关到下一关

打过了第一关,来到第二关。

三、设计游戏规则

开发一款游戏实属不易,尽管这款游戏尚未正式上线,但它已然是three.js在微信小游戏平台上的一次勇敢尝试与实践。 就当前阶段而言,这款游戏在画面设计、关卡设置以及整体可玩性和激励性方面,尚缺乏专业视角的打磨与指引。然而,我们深知罗马非一日建成,因此正稳步前行,逐步改进。 对于程序员而言,在现阶段的游戏设计中,他们主要聚焦于两大核心要素:一是游戏的可玩性,确保玩家能够沉浸其中,享受游戏带来的乐趣;二是游戏的性能,力求在保障游戏流畅运行的同时,为玩家提供稳定、高质量的游戏体验。这款游戏虽尚显稚嫩,但作为学习教程已绰绰有余,为我们后续的开发工作奠定了坚实的基础。

后面将继续讲解

第二课:代码实现人物骨骼模型

第三课:小游戏控制杆的实现

第四课:地图的制作

第五课:敌人自主攻击

第六课:关卡设计、背景音乐、攻击音乐等

姑且按照上述的先安排后续系列教程吧。

技术交流 1203193731@qq.com

如果你有什么要交流的心得 可邮件我

其它相关文章:

如何基于three.js(webgl)引擎架构,实现3D医院、3D园区导航,3D科室路径导航

如何基于three.js(webgl)引擎架构,实现3D密集架库房,3D档案室(3d机器人取档、机器人盘点、人工查档、设备巡检)

如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案------第十九课(一)

如何使用webgl(three.js)实现3D消防、3D建筑消防大楼、消防数字孪生、消防可视化解决方案------第十八课(一)

webgl(three.js)3D光伏,3D太阳能能源,3D智慧光伏、光伏发电、清洁能源三维可视化解决方案------第十六课

如何用webgl(three.js)搭建一个3D库房,3D仓库3D码头,3D集装箱,车辆定位,叉车定位可视化孪生系统------第十五课

webgl(three.js)实现室内三维定位,3D定位,3D楼宇bim、实时定位三维可视化解决方案------第十四课(定位升级版)

使用three.js(webgl)搭建智慧楼宇、设备检测、数字孪生------第十三课

如何用three.js(webgl)搭建3D粮仓、3D仓库、3D物联网设备监控-第十二课

如何用webgl(three.js)搭建处理3D隧道、3D桥梁、3D物联网设备、3D高速公路、三维隧道桥梁设备监控-第十一课

如何用three.js实现数字孪生、3D工厂、3D工业园区、智慧制造、智慧工业、智慧工厂-第十课

使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

如何用webgl(three.js)搭建一个3D库房-第一课

如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课

使用webgl(three.js)搭建一个3D建筑,3D消防模拟------第三课

使用webgl(three.js)搭建一个3D智慧园区、3D建筑,3D消防模拟,web版3D,bim管理系统------第四课

如何用webgl(three.js)搭建不规则建筑模型,客流量热力图模拟

使用webgl(three.js)搭建一个3D智慧园区、3D建筑,3D消防模拟,web版3D,bim管理系统------第四课(炫酷版一)

使用webgl(three.js)搭建3D智慧园区、3D大屏,3D楼宇,智慧灯杆三维展示,3D灯杆,web版3D,bim管理系统------第六课

如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题(机房升级版)-第九课(一)

相关推荐
三维搬砖者5 小时前
基于 Three.js 开发三维引擎-02动态圆柱墙体实现
three.js
小桥风满袖5 小时前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
用户3802258598248 小时前
使用three.js实现3D地球
前端·three.js
三维搬砖者13 小时前
基于 Three.js 开发三维引擎-01点类:从原理到实践
webgl·three.js
Mintopia1 天前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
康康的幸福生活2 天前
webgl2 方法解析: getContext()
webgl
庖丁解牛3 天前
3. Babylonjs 中获取相机方向相关
前端·webgl·游戏开发
康康的幸福生活3 天前
webgl2 方法解析: createBuffer()
前端·javascript·webgl
Mintopia3 天前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js