在微信小游戏中使用three.js显示3D图形

年前，微信发布了一个重磅消息：微信小程序的小游戏功能，千呼万唤始出来！

笔者之前从未接触过微信小程序和WebGL的开发，但是却一直有留意相关技术的发展，大概听说原来微信小程序是不支持WebGL 3D技术的。这次借着微信大力推广小游戏，看了一下API文档，发现小游戏是可以使用WebGL进行开发的。而最近正好又有点时间，就随便搞搞，试试小游戏的效果。因为小游戏“跳一跳”是用three.js制作的，所以我就选择了three.js。那么开始吧。

微信小游戏教程地址：教程小游戏

开发环境搭建

下载了最新的微信开发工具，并按照教程建立了示例项目。示例游戏是2D游戏，和我期望的有点距离，找遍网络没有一个3D的微信小游戏示例，看来只能自己试试了。

新建了一个小程序项目，并且按照教程添加了game.js 和game.json，但是程序一直报错：



后来发现是调试基础库没有默认为“game”,按照截图操作之后就正常了：

引入three.js

到github下载three.js最新版本，笔者当时下载的是r89，用最新的应该也没有问题。前文介绍过，笔者并没有开发小程序的经验，所以一上来就在game.js里直接引用three.js：

import './js/libs/weapp-adapter.js'
import './js/libs/symbol.js'
import './js/three/three.js'

var scene = new THREE.Scene();

程序直接报错：



耐心看了小程序开发的说明，再看了three.js的写法，重新修改引用方式，game.js:

import './js/libs/weapp-adapter.js'
import './js/libs/symbol.js'

var THREE = require('./js/three/three.js');
var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var context = canvas.getContext('webgl');
var renderer = new THREE.WebGLRenderer(context);

renderer.setSize(window.innerWidth, window.innerHeight);

canvas.appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function render() {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
}
render();

一个旋转的立方体就在开发环境下显示出来了！



到目前为止，一切算是比较顺利，于是马上使用预览功能上传到手机微信进行测试：



这个时候发生问题了：手机微信看不到我的立方体？！

还好微信环境下有提供console，笔者通过记录日志，最终定位了错误：



原来是three.js里面有一段代码：



是判断当前环境WebGL版本的，而微信环境下是opengl es3.2，使用这句正则表达式明显不能匹配到。我们稍微改一下：

var version = parseFloat( /^(WebGL|OpenGL ES)\ ([0-9])/.exec( gl.getParameter( gl.VERSION ) )[ 1 ] );

再次发布预览试试看！

成功！

网友eastecho
写了一篇文章，更加详细的阐述了这方面的内容：https://indienova.com/indie-game-development/run-threejs-on-wechat-game-platform/