【魔兽世界】新的.js的主体代码看起来是这样的

等等...

需要强调的是，weapp-adapter 对浏览器环境的模拟远不完整的，仅仅只针对游戏引擎可能访问的属性和调用的方法进行了模拟，也不保证所有游戏引擎都能通过 weapp-adapter 顺利无缝接入小游戏。直接将 weapp-adapter 提供给开发者，更多地是作为参考新开发网页游戏，开发者可以根据需要在 weapp-adapter 的基础上进行扩展，以适配自己项目使用的游戏引擎。

原文请参阅：这里。

可见，微信团队已经为我们开发游戏做好了一些准备，比如露出的 canvas，我们到时候直接拿来使用就是。

将之前的代码移植到项目中

开始将之前写好的代码移植过来，注意由于要使用 ES 6（EMCAScript 6）标准，所以之前的代码可能要做相应的调整，不过大部分都是语法的调整，有一些方法的使用需要增加 bind(this)，具体的还请大家参阅我们提供的链接地址，就算不看书，随便尝试一下也能很快有所了解。

新的 main.js 的主体代码看起来是这样：

import * as THREE from 'libs/three.js'
let ctx   = canvas.getContext('webgl')
let scene
let renderer
// ... 其它变量／常量 ...

/**
 * 游戏主函数
 */
export default class Main {
  constructor() {
    this.start()
  }
  start() {
    // 初始化
    scene     = new THREE.Scene()
    renderer  = new THREE.WebGLRenderer({ context: ctx })
    //... 其它代码块 ...

    // 开始循环
    this.loop()
  }
  // UPDATE 更新
  update() {
    // ... 数据更新代码块 ...
  }
  // RENDER 渲染
  render() {
    // ... 渲染代码块 ...
  }
  // 实现游戏帧循环
  loop() {
    this.update()
    this.render()
    window.requestAnimationFrame( this.loop.bind(this), canvas )
  }
}

一些要点：

由于微信已经为我们准备好了的 canvas，所以我们无需自己再进行创建，只需要取得的 canvas 的 context 就可以了，这里我们使用的不是 2d，而是 webgl。

let ctx = canvas.getContext('webgl')

然后我们在创建 WebGLRenderer 的时候，直接使用这个 context 就可以了。

renderer  = new THREE.WebGLRenderer({ context: ctx })

这两点做到了，基本上就不会有太大问题了。

一切正常的话，开发者工具里面应该就能跑得起来了。

能跑起来并不算完，还需要真机测试

真机调试

真机调试不复杂，微信开发者工具提供了真机预览功能，只要点一下“预览”，就会上传代码，并生成二维码供测试。

mp.weixin.qq.com/a/~~KXw-v1yT0Xw~q6neR3F6N1Q9g8Uzb0yOVA~~ (二维码自动识别)

开发者用微信扫描这个二维码，就可以打开测试。

如果您没有修改过 three.js 源文件，那么很有可能只看到一个黑屏。

还好，微信小游戏提供了一个调试开关，我们可以选择打开调试：

然后再次扫码进入，就可以查看调试信息了：

可以清晰的得知，createElementNS 不被支持，那么我们可以将所有 createElementNS 改为 createElement：（注意，这只是暂时解决方案，此方法并不是理想方案，我们以后应该会有更好的解决方法，通过修改 adapter 应该就可以减少 three.js 源文件的修改。）

document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );
// 改为 ==>
document.createElement( 'canvas' );

不止这一处，而且也不止是针对 canvas 的创建，还有针对 img 的创建，可以都修改掉。

另外由于真机上跑的是 OpenGL ES 1.x/2.x/3.x，所以还有一句要处理：

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

这样改过后，重新再尝试一下看，是不是已经可以了？

2018-01-08 更新

临时解决方案使用后新开发网页游戏，我后来尝试修改 weapp-adapter.js，就不需要再对 three.js 进行修改了：

createElementNS: function createElementNS(nameSpace, tagName) {
  return this.createElement(tagName)
}

方法很简单：我们在 document 的定义中添加 createElementNS，然后忽略掉 NameSpace 即可。

结束语

好了，简单的介绍了一下怎么利用 three.js 开发微信小游戏，这并不是一篇教程，只是在目前信息和资料不完善情况下的一种尝试，也希望大家一起参与到开发和研究中来，互相交流。

欢迎加入我们的小组：微信小游戏小组

源代码

为了方便大家参考，特提供源代码。其中包括一个微信小游戏项目和原始的 WebGL 项目。

Github 源代码下载

参考链接

这几天研究这部分内容的时候，遇到不少奇怪的问题，这部分内容又很难依靠 Google 和 StackOverflow 来解决，还好找到了交流的 QQ 群，以及群中成员的交流心得，才算完成了这次尝试。

其它相关链接

请先阅读：微信小游戏官方文档

目前，Cocos、Egret、Laya 已经完成了自身引擎及其工具对小游戏的适配和支持，访问对应的官方文档可以更快地接入小游戏的开发