使用three.js，实现微信3D小游戏系列教程，框架篇（一）

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

如果你有什么要交流的心得 可邮件我
 
闲话少叙，亮个相吧！
一、代码结构说明
程序目录图：

主程序主要分为配置、入口、库、模型、多线程库、主代码以及资源。
其中 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的主要逻辑代码　　

1.   constructor() {
2.         var _this = this;
3.         this.currentUnitObject = null;
4.         this.unit = 1;//关卡
5.         this.speed = 16;//移动速度
6.         this.wt3dobject = null;
7.         this.controlLever = null;
8.         this.xpcobj = null;
9.         this.ZJQiPao = null;//主角的气泡
10.         this.qipaoParent = null;//母气泡
11.         this.woker = wx.createWorker('workers/enemyWoker.js');
12.         this.woker.onProcessKilled(function () {
13.             console.log("线程被杀了");
14.             _this.woker = wx.createWorker('workers/enemyWoker.js');
15.         });
16.         this.music = new Music()
17.         this.createPublicObjects();
18.         this.refreshScene(this.unit);
19.     }

复制代码

　　
 说明：由于gif图限制大小缘故，后面的gif录屏智能选择模糊版
 2.2、控制主角移动

空过摇杆控制器控制主角跑动移动，这里先大概讲解如何实现控制器摇杆
三维场景中 有一个叫做hub模型 是指模型本身永远浮动在相机表面
创建模型：

1.    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}
2.    w3Dobj.InitAddHudObject(jsonobj);

复制代码

绑定模型事件

1.   touchStart (_obj, face, objs,event)  {
2.     var _this=this;
3.     if(_obj.name=="musicBack"){//开启背景音乐
4.       _obj.visible=false;
5.       this.w3Dobj.HudScene.children[9].visible=true;
6.       this.music.stopBgm();
7.     }else if(_obj.name=="noMusicBack"){//关闭背景音乐

复制代码

1. _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、控制主角攻击

 通过点击右侧招式 控制小人主角发大招，有冷却 运功时间
执行骨骼动画：
[code]   //隐藏金钟罩                _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)

谢谢分享，试用一下