环境配置

下载开发者工具

下载地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

微信小程序/小游戏的开发需要在专门的开发者工具中，可下载最近更新的稳定版，若之前没有使用过微信开发的话，进入小游戏开发指南填写和提交相关的注册信息。

如图新建一个空目录，选择该目录建立自己的项目。

选择小游戏打开后会默认进入一个示例小游戏，在模拟器中可以将声音关闭：

目录结构

以上为小游戏的目录，红色方框里的为小程序的常规配置，具体内容见文档：微信配置文档。其它目录：

audio ：存放音频文件
images：图片资源
js：游戏逻辑的具体实现，需要的工具类库等
databus.js：管控游戏状态
game.js：打包入口
game.json：微信小游戏配置，参考文档：小游戏配置

./js中内容如下，里面基本所有的代码我们都可以舍弃，但是有一个依赖包很重要：weapp-adapter.js 。这个包为微信小程序环境创建了类似与WEB浏览器的一系列 API 与 DOM，其中就包括了 canvas 。

./js
├── base                                   // 定义游戏开发基础类
│   ├── animatoin.js                       // 帧动画的简易实现
│   ├── pool.js                            // 对象池的简易实现
│   └── sprite.js                          // 游戏基本元素精灵类
├── libs
│   ├── symbol.js                          // ES6 Symbol简易兼容
│   └── weapp-adapter.js                   // 小游戏适配器
├── npc
│   └── enemy.js                           // 敌机类
├── player
│   ├── bullet.js                          // 子弹类
│   └── index.js                           // 玩家类
├── runtime
│   ├── background.js                      // 背景类
│   ├── gameinfo.js                        // 用于展示分数和结算界面
│   └── music.js                           // 全局音效管理器
├── databus.js                             // 管控游戏状态
└── main.js                                // 游戏入口主函数

引入Three.js

现在我们还缺少Three.js，因为我在其它项目中使用过 three ，从node_modules找到three，把编译后的文件放到libs目录下即可。

在小程序中运行 threejs

目标效果

我们的目标是把博文threejs-场景创建中的效果搬到小屏幕上，在web端运行效果如下。

小程序代码

代码逻辑和在web端是完全一样的，唯一的区别就是在小程序中无法使用框架（react）,需要使用原生JS写法，不过问题不大。

import * as THREE from './js/libs/three.js'
import './js/libs/weapp-adapter.js'// 创建渲染器
const renderer = new THREE.WebGLRenderer({canvas: canvas
})
renderer.setClearColor(new THREE.Color(0x000000)); // 设置背景颜色和透明度
renderer.shadowMap.enabled = true; // 渲染器允许渲染阴影⭐
renderer.setSize(window.innerWidth, window.innerHeight)// 创建场景
const scene = new THREE.Scene()// 创建相机并设置属性
const camera = new THREE.PerspectiveCamera()
camera.aspect = (window.innerWidth / window.innerHeight) // 摄像机设置屏幕宽高比
camera.fov = 45; // 摄像机的视角
camera.near = 0.01; // 近面距离
camera.far = 1001; // 远面距离
camera.position.set(30, 40, 30) // 设置摄像机在threejs坐标系中的位置
camera.lookAt(0, 0, 0) // 摄像机的指向// 添加一个坐标轴
const axes = new THREE.AxesHelper(20);
scene.add(axes);// 添加一个地板
const planeGeometry = new THREE.PlaneGeometry(60, 20); // 创建平面几何体
const planeMaterial = new THREE.MeshBasicMaterial({ // 一种非光泽表面的材质，没有镜面高光color: 0xAAAAAA
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial); // 创建地板模型
plane.rotation.x = -0.5 * Math.PI; // 默认平行于xoy面，沿着X轴旋转-90°至xoz面
plane.receiveShadow = true;
scene.add(plane); // 向场景中添加创建的地板// 添加一个球体
const sphereGeometry = new THREE.SphereGeometry(4, 20, 20); // 球状几何体
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x7777FF, side: THREE.DoubleSide });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.castShadow = true; // 允许接受阴影
sphere.position.set(20, 4, 2); // 球模型在坐标系中位置
scene.add(sphere); // 向场景中添加光源// 添加一个立方体
const cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 'blue' })
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.position.set(-20, 2.5, 0);
scene.add(cube)let step = 0;
const cubrRoatetSpeed = 0.03;
const sphereRotateSpeed = 0.03const animate = function () {step += sphereRotateSpeedsphere.position.x = 20 + (10 * Math.cos(step)); //水平方向为余弦曲线sphere.position.y = 4 + (10 * Math.abs(Math.sin(step))); // 竖直方向为正弦曲线// // 立方体添加旋转效果cube.rotation.x += cubrRoatetSpeed;cube.rotation.y += cubrRoatetSpeed;cube.rotation.z += cubrRoatetSpeed;
}const render = function () {animate()renderer.render(scene, camera)requestAnimationFrame(render)
}render()

打开微信开发者工具，查看效果：

这里发现两个问题：

使用 MeshLambertMaterial 材质时颜色没有生效，只能换成 MeshBasicMaterial
原生threejs 的阴影没有生效，可能需要书写webgl来解决这个问题。

看来threejs在小程序上的适配还是有很大问题，不过也可以理解，毕竟小程序的运行环境与浏览器是完全不同的。但是目标已经完成，工程代码可下载。

微信3D小游戏系列一：在微信小游戏中使用threejs相关推荐

微信公众号开发系列-玩转微信开发-目录汇总
引言最遗憾的不是把理想丢在路上,而是理想从未上路. 每一个将想法变成现实的人,都值得称赞和学习.致正在奔跑的您! 在现在这个无处不在的互联网背景下,各种应用已不再仅仅局限于网页或桌面应用了,IOS. ...
【微信小程序系列：二】小程序常用功能：跳转地图、扫一扫、人脸识别、拍照、拨打电话、调整屏幕亮度、文字可复制、监听截屏...
一.先言: (-￣▽￣)-,hello,微信小程序系列第二篇,介绍下小程序里的前端常用功能api,可以快速copy使用~ 二.文字可复制: 小程序页面里的文字默认是没有长按复制功能的,需要套个标签来实 ...
Python 微信自动化工具开发系列04_所有微信群的群文件自动同步拷贝到群名对应的新文件夹中（2023年1月可用）
前言一个需求需要利用Python+第三方库wxauto 用于微信上自动获取聊天信息,从而根据自己需求对信息自动进行二次处理, 比如自动回复,再比如自动发送文件或者其他.--- 记录于2022年08月 ...
【微信小程序系列：五】小程序适老化自动适配工具miniprogram-elder-transform---微信老年关怀模式下小程序字体适配微信字体
1.先言这个工具我网上基本找不到任何一篇文章说这个miniprogram-elder-transform的使用的,==,既然没有,那咱就自己写第一篇~ Android字体大小标准默认16px,iOS ...
微信公众号开发系列-12、微信前端开发利器：WeUI
1.前言通过前面系列文章的学习与讲解,相信大家已经对微信的开发有了一个全新的认识.后端基本能够基于盛派的第三方sdk搞定大部分事宜,剩下的就是前端了.关于手机端的浏览器的兼容性问题相信一直是开发者们 ...
知识竞赛答题小程序系列-关于成绩排行榜的设计与反思
接了不少的知识竞赛答题小程序系列,在做的过程中,作为开发者,我常常思考关于排行榜的设计与逻辑,如何把它做得更好,譬如提高用户体验.譬如发挥它的价值...... 什么是排行榜? 排行榜是对某一相关同类事 ...
视频教程-Layabox3D游戏开发入门-微信3D小游戏案例 -微信开发
Layabox3D游戏开发入门-微信3D小游戏案例有多年Unity程序开发经验,有策划和美术设计的经验.愿意在csdn这个平台和大家一起分享! 金龙 ¥29.00 立即订阅扫码下载「CSDN程序员 ...
Laya官方不会告诉你的坑（微信小游戏系列）
Laya官方不会告诉你的坑(微信小游戏系列) 使用laya2系列调试微信小游戏的时候, 发现了以下问题, 看了一圈官网也没提及, 所以记录一下供大家参考和讨论. 1.报错 ReferenceError ...
【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...

微信3D小游戏系列一：在微信小游戏中使用threejs

文章目录