年前，微信釋出了一個重磅訊息：微信小程式的小遊戲功能，千呼萬喚始出來！

筆者之前從未接觸過微信小程式和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/