使用three.js,实现微信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、游戏启动,初始画面

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

初始化入口:game.js

//引入微信库小程序文件
    import './js/libs/weapp-adapter'
    import './js/libs/symbol'
    //引入自定义主入口
    import game3d from './js/Main'

//创建main中game3d类的游戏对象
    var mygame=new game3d()
main.js的主要逻辑代码

复制代码
  constructor() {
        var _this = this;
        this.currentUnitObject = null;
        this.unit = 1;//关卡
        this.speed = 16;//移动速度
        this.wt3dobject = null;
        this.controlLever = null;
        this.xpcobj = null; this.ZJQiPao = null;//主角的气泡 this.qipaoParent = null;//母气泡 this.woker = wx.createWorker('workers/enemyWoker.js'); this.woker.onProcessKilled(function () { console.log("线程被杀了"); _this.woker = wx.createWorker('workers/enemyWoker.js'); }); this.music = new Music() this.createPublicObjects(); this.refreshScene(this.unit); }

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

2.2、控制主角移动

空过摇杆控制器控制主角跑动移动,这里先大概讲解如何实现控制器摇杆

三维场景中 有一个叫做hub模型 是指模型本身永远浮动在相机表面

创建模型:

复制代码
   var jsonobj={"show":true,"name":"firstEye","uuid":"","objType":"plane","width":this.clBtnradius*0.9,"height":this.clBtnradius*0.9,"color":16777215,"pic":"images/eye.png","transparent":true,"opacity":1,"side":2,"materialType":"basic","position":{"x":-window.innerWidth/2+this.clBtnradius,"y":window.innerHeight/2-this.clBtnradius*3,"z":-150},"rotation":{"x":0,"y":0,"z":0},"scale":{"x":1,"y":1,"z":1},"showSortNub":7,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"wx":null,"wy":null,"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null}
   w3Dobj.InitAddHudObject(jsonobj);

绑定模型事件

复制代码
  touchStart (_obj, face, objs,event)  {
    var _this=this;
    if(_obj.name=="musicBack"){//开启背景音乐
      _obj.visible=false;
      this.w3Dobj.HudScene.children[9].visible=true;
      this.music.stopBgm(); }else if(_obj.name=="noMusicBack"){//关闭背景音乐
复制代码
_obj.visible=false; this.w3Dobj.HudScene.children[8].visible=true; this.music.playBgm(); }else if(_obj.name=="firstEye"){ this.selectFristEyeindex=event.changedTouches[0].identifier; var xpcobj= this.w3Dobj.commonFunc.findObject("xpc"); this.w3Dobj.camera.ooldPosition={ x: _this.w3Dobj.camera.position.x, y: _this.w3Dobj.camera.position.y, z: _this.w3Dobj.camera.position.z } this.w3Dobj.controls.ooldtarget={ x: _this.w3Dobj.controls.target.x, y: _this.w3Dobj.controls.target.y, z: _this.w3Dobj.controls.target.z } this.w3Dobj.camera.position.x=xpcobj.position.x; this.w3Dobj.camera.position.y=xpcobj.position.y+400; this.w3Dobj.camera.position.z=xpcobj.position.z; this.w3Dobj.controls.target.x=xpcobj.position.x+3000*Math.sin(xpcobj.rotation.y); this.w3Dobj.controls.target.y=xpcobj.position.y+200; this.w3Dobj.controls.target.z=xpcobj.position.z+3000*Math.cos(xpcobj.rotation.y); return false; } }

2.3、控制主角攻击

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

执行骨骼动画:

复制代码
   //隐藏金钟罩
                _this.hideJZZ();
                //显示其它功夫控制器
                _this.showKongFuControl();
                clearInterval(_this.xpcobj.runTimeInterval);
                //移动主角
                _this.xpcobj.runTimeInterval = setInterval(() => {
                    if(_this.currentUnitObject){
                        _this.currentUnitObject.changeXPCPosition();
                    //修改摄像机
                        _this.currentUnitObject.changeCamera();
                    }

                    //修改主角运动动画
                    if (Math.abs(_this.controlLever.speed.x) <= 0.1 && Math.abs(_this.controlLever.speed.y) <= 0.1) { if (_this.xpcobj.currentAnimationNameName != "stand") { _this.xpcobj.animation.doAnimation("stand") _this.xpcobj.currentAnimationNameName = "stand"; } } 

2.4、敌人对战

这里涉及到敌人的移动,寻址。

我们要避开墙体

复制代码
    /**
     * 计算线 在法向量上的平移
     * @param {any} x1
     * @param {any} y1
     * @param {any} x2
     * @param {any} y2
     * @param {any} moveLength >0 上移动 <0下移
     */
    static LineTranslationByNormalvector(x1, y1, x2, y2,moveLength) {
        //计算角度
        var lineAngle = this.getAngle(x1, y1, x2, y2) / 180 * Math.PI;
            var x1_new = x1 - moveLength * Math.sin(lineAngle);
            var x2_new = x2 - moveLength * Math.sin(lineAngle);
            var y1_new = y1 + moveLength * Math.cos(lineAngle);
            var y2_new = y2 + moveLength * Math.cos(lineAngle); return [x1_new, y1_new, x2_new, y2_new] }
复制代码
/**
 * 计算两条线的焦点
 * @param {any} a
 * @param {any} b
 * @param {any} c
 * @param {any} d
 */
    static segmentsIntr(a, b, c, d) {
    var denominator = (b.y - a.y) * (d.x - c.x) - (a.x - b.x) * (c.y - d.y);
    if (denominator == 0) {
        return false;
    }
    // 线段所在直线的交点坐标 (x , y)      
    var x = ((b.x - a.x) * (d.x - c.x) * (c.y - a.y)
        + (b.y - a.y) * (d.x - c.x) * a.x - (d.y - c.y) * (b.x - a.x) * c.x) / denominator; var y = -((b.y - a.y) * (d.y - c.y) * (c.x - a.x) + (b.x - a.x) * (d.y - c.y) * a.y - (d.x - c.x) * (b.y - a.y) * c.y) / denominator; /** 2 判断交点是否在两条线段上 **/ if ( // 交点在线段1上 (x - a.x) * (x - b.x) <= 0.0000001 && (y - a.y) * (y - b.y) <= 0.0000001 // 且交点也在线段2上 && (x - c.x) * (x - d.x) <= 0.0000001 && (y - c.y) * (y - d.y) <= 0.0000001 ) { // 返回交点p return { x: x, y: y, inline: true, all: true } } else if ( // 交点在线段1上 (x - a.x) * (x - b.x)>= 0 && (y - a.y) * (y - b.y) >= 0 // 且交点也在线段2上 && (x - c.x) * (x - d.x) >= 0 && (y - c.y) * (y - d.y) >= 0 ) { // 返回交点p return { x: x, y: y, inline: false, all: true } } else { //否则不相交 return { x: x, y: y, inline: false, all: false } } }

可以踢腿,可以发大招

执行发大招的骨骼动画,创建气体实例,让其沿着动作方向移动。

复制代码
 _this.xpcobj.animation.doAnimation("taiji_k", 1, function (time, stepname) {
                                    if (stepname == "qishi6") {
                                        var qipao = wt3DObj.commonFunc.findObject("ZJqipao");
                                        _this.ZJQiPao = qipao;
                                        qipao.visible = true;
                                        var lhp = _this.xpcobj.children[4].children[0].children[0].getWorldPosition() var rhp = _this.xpcobj.children[3].children[0].children[0].getWorldPosition(); qipao.position.x = (lhp.x + rhp.x) / 2; qipao.position.y = (lhp.y + rhp.y) / 2 + 30; qipao.position.z = (lhp.z + rhp.z) / 2; qipao.scale.x = 1; qipao.scale.y = 1; qipao.scale.z = 1; _this.currentUnitObject.QIPAOcollisionDetection(qipao); } // console.log(stepname); })

2.5、过关到下一关

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

切换关卡

复制代码
 refreshScene(unit) {
        var _this=this;
        //回收
        wx.triggerGC();
        _this.unit=unit;
            if (unit == 1) {
                _this.currentUnitObject = new unit01BSS(_this,THREE,TWEEN); _this.currentUnitObject.load(); }else if(unit==2){ if( _this.currentUnitObject){ _this.currentUnitObject.destory(function(){ _this.currentUnitObject = new unit02BSS(_this,THREE,TWEEN); _this.currentUnitObject.load(); }) }else{ _this.currentUnitObject = new unit02BSS(_this,THREE,TWEEN); _this.currentUnitObject.load(); } } }

三、设计游戏规则

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

技术交流 1203193731@qq.com

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

后面的课程将继续讲解

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

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

第四课:地图的制作

第五课:敌人自主攻击

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

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

技术交流 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机房管线问题(机房升级版)-第九课(一)

相关推荐
魂断蓝桥66610 小时前
使用three.js实现3D消防,消防管线,消防教育(课一:消防给水系统01)
webgl·数字孪生·three.js·3d建筑·物联网3d·3d定位、三维室内定位、3d建筑·3d消防·消防演习模拟·消防给水系统
烛阴1 天前
Mix
前端·webgl
烛阴2 天前
Tile Pattern
前端·webgl
平行云3 天前
实时云渲染将UE像素流嵌入业务系统,实现二维管理系统与数字孪生三维可视化程序的无缝交互
unity·webgl·数字孪生·云渲染·虚幻引擎·实时云渲染·像素流送
烛阴5 天前
Mod
前端·webgl
救救孩子把6 天前
Three.js 从零入门:构建你的第一个 Web 3D 世界
前端·javascript·3d·threejs
烛阴7 天前
Fract - Grid
前端·webgl
cos8 天前
从像素到粒子:p5.js 图像转动态粒子的设计与实现
前端·javascript·webgl
lunoctis9 天前
Unity微信小游戏小窗口模式点击适配
unity·微信小游戏
山海鲸可视化11 天前
模型材质一键替换~轻松还原多种三维场景
webgl·数字孪生·材质·3d模型·三维渲染