使用threejs开发微信小游戏全过程

最新推荐文章于 2024-08-15 09:52:50 发布

同是天涯程序猿

最新推荐文章于 2024-08-15 09:52:50 发布

阅读量6.5k

点赞数 8

分类专栏：微信小游戏文章标签：前端微信游戏

本文链接：https://blog.csdn.net/xcg132566/article/details/104999400

版权

本文详述了使用threejs开发微信小游戏的全过程，包括项目创建、hud元素绘制、离屏canvas处理、图片模糊问题解决、排行榜与开放数据域的实现、云开发的应用以及软件著作权申请和游戏审核的相关内容。作者通过实例代码展示了如何创建游戏场景、绘制hud元素，以及处理云数据库和云函数，为小游戏开发提供实用指导。

摘要由CSDN通过智能技术生成

我年前至今至今对微信小游戏尝了尝鲜，从开发到上线全流程做了一款小游戏。特做个记录分享给大家。

长文警告！全文共8527字，阅读此文会耗费不少时间。可收藏备用查看。

小游戏目前只支持JavaScript一种语言，但JS的支持也并不完全，最主要的区别是小游戏BOM 和 DOM API，小游戏提供了canvas，支持2d和webgl，可操作性还是挺高的。需要注意的是小游戏可以同时创建多个canvas画布，但只有一个上屏画布，而其它再次创建的皆是离屏画布。所谓上屏画布就是我们可以看到的画布，离屏画布如果要看到需要绘制到上屏画布。后面会有介绍到。

小游戏的制作引擎可以有几种选择：Cocos、Egret、Laya 和 threejs，跳一跳就是使用threejs作为引擎，本文主要介绍threejs。

—

使用threejs开发微信小游戏

1. 创建项目

使用threejs开发小游戏，首先需要下载微信开发者工具，注册一个微信小游戏的账号，然后根据流程创建一个微信小游戏。

使用微信开发者工具默认创建的小游戏项目是类似打飞机的一个小游戏，是使用canvas2d制作的一个有基本的游戏逻辑实现的小游戏，没有小游戏开发经验的可以先读一读这个小游戏的代码可以对小游戏开发有一个简单的了解。

构建项目时可以删除无用的文件，然后引入threejs的文件，需要保留原有项目中的symbol.js和weapp-adapter.js两个文件，这两个文件是对小游戏的适配，根据实际情况可能还需要修改，相关内容可以访问了解https://mp.weixin.qq.com/debug/wxagame/dev/tutorial/base/adapter.html

本文提供了一个简单的示例项目：

链接：https://pan.baidu.com/s/1T5-eDHdkTIjvRM_YZn0alA提取码：1n38

目录结构为：

其中main.js和main1.js分别是两个示例，main1.js是使用threejs加载一个glb模型并应用模型动画：

main.js是一个旋转的正方体示例：

2. 如何绘制hud元素

什么是hud元素，hud全称平视显示器（head up display）简称HUD。就是在游戏中游戏场景外的元素，比如操作按钮、信息或弹窗等元素。

在使用threejs构建游戏场景中，一般我们场景会使用透视相机PerspectiveCamera渲染场景，透视相机展示的场景会更真实，物体会根据远近不同而显示的大小不同，渲染场景代码类似：

let THREE = require('../three/three')let ctx = canvas.getContext('webgl')export default class Main {
    constructor() {
      var camera, scene, renderer;    this.init();    this.animate();  }  init() {
      this.scene = new THREE.Scene();    this.camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);    this.camera.position.set(1000, 1000, 1000);    this.camera.lookAt(0, 0, 0);    this.renderer = new THREE.WebGLRenderer({ context: ctx, canvas: canvas })    this.renderer.setPixelRatio(window.devicePixelRatio);  }  animate() {
      requestAnimationFrame(this.animate.bind(this), canvas);    this.renderer.render(this.scene, this.camera);  }}

而小游戏只有一个上层canvas，所有元素都需要展示在上层canvas，如果将hud类型的元素直接放在透视相机渲染的场景里，会出现一些问题，比如在游戏的过程中随着场景相机的变化，在场景中的hud元素可能会发生形状和位置的变化。

好在threejs可以有其它解决方法，可以利用正交相机OrthographicCamera渲染另一个场景来达到显示hud元素的目的，所谓正交相机简单来说就是元素无论距离远近大小都不会产生变化，具体可以查看threejs文档详细了解。使用正交相机渲染hud的场景代码：

let THREE = require('../three/three')let ctx = canvas.getContext('webgl')export default class Main {
    constructor() {
      var camera, scene, renderer;    var hudCamera, hudScene;    this.init();    this.animate();  }  init() {
      this.scene = new THREE.Scene();    this.camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);    this.camera.position.set(1000, 1000, 1000);    this.camera.lookAt(0, 0, 0);    this.hudScene = new THREE.Scene();    this.hudCamera = new THREE.OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, -100, 100);    this.hudCamera.updateProjectionMatrix();    this.hudCamera.lookAt(new THREE.Vector3(0, 0, 0));    this.renderer = new THREE.WebGLRenderer({ context: ctx, canvas: canvas })    this.renderer.setPixelRatio(window.devicePixelRatio);  }  animate() {
      requestAnimationFrame(this.animate.bind(this), canvas);    this.renderer.render(this.scene, this.camera);    this.renderer.render(this.hudScene, this.hudCamera);  }}