微信小游戏three.js开发

如何用three.js开发微信小游戏

首先我们先用微信开发者工具创建一个模块，然后先将里面不需要的内容删除，将three.js放到我们的项目中，并且在main.js都将其引入：

./js目录下：

├── libs
│   ├── symbol.js                          // ES6 Symbol简易兼容
│   ├── weapp-adapter.js                   // 小游戏适配器
│   └── three.min.js                       
└── main.js                                // 游戏入口主函数

这里我用一个3D游戏中比较常见并且对于新手来说是个麻烦的例子来写：3D场景中绘制2D平面

一：首先我们要定义我们的场景，相机，以及将其渲染出来（这里的canvas是weapp-adapter.js中暴露出出来的，是主屏画布，之后创建的画布都属于离屏画布，必须依赖于主屏画布）：

    this.renderer = new THREE.WebGLRenderer({
      canvas: canvas
    })
    this.renderer.setSize(this.screenWidth, this.screenHeight)
    this.renderer.setClearColor('#cecece', 1)
    this.renderer.setSize（）
    this.scene = new THREE.Scene()
    this.camera = new THREE.PerspectiveCamera(
      45,
      this.screenWidth / this.screenHeight,
      10,
      1000
    )
    this.camera.position.z = 500
    this.scene.add(this.camera)
    this.renderer.render(this.scene, this.camera)

这样我们就绘制出了一个简单的灰色场景了，但是当打开开发者工具的时候，发现屏幕是黑色的，但是却没有报错

但是当我们用真机调试的时候，发现会有以下的错误：

导致这个错误是因为在小游戏中createElementNS 不被支持，那么我们可以将所有 createElementNS 改为 createElement，这里有两种方式，一种是更改three.js源码（麻烦），还有一种方式就是直接修改weapp-adapter.js,找到 var doucument = {}, 将以下代码写在该对象：

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

重新编辑代码，发现我们可以看到灰色背景了。

二：接着我们在3d场景中绘制我们的2d内容,这里用精灵贴图来进行2D的绘制，不清楚什么是精灵贴纸的可以访问 https://threejs.org/docs/#api/materials/SpriteMaterial, 以纹理的方式进行绘制，代码如下:

    let canvas2 = wx.createCanvas()
    canvas2.width = this.screenWidth
    canvas2.height = this.screenHeight
    let ctx = canvas2d.getContext("2d")
    ctx.fillStyle = "white"
    ctx.fillRect(10, 10, this.screenWidth / 2 - 20, this.screenHeight / 2 - 20)
    ctx.fillStyle = "black"
    ctx.textAlign = "center"
    ctx.font = "16pt Arial"
    ctx.textBaseline = "middle"
    ctx.fillText("蚂蚁", this.screenWidth / 4, this.screenHeight / 4)

    let texture = new THREE.Texture(canvas2)
    texture.needsUpdate = true

    var spriteMaterial = new THREE.SpriteMaterial({
      map: texture,
      color: 0xffffff
    })
    var sprite = new THREE.Sprite(spriteMaterial)
    sprite.scale.set(200, 400, 1)
    sprite.position.set(10, 0, 10)
    this.scene.add(sprite)
    this.renderer.render(this.scene, this.camera)

这里可能会遇到报一个错误，项目中找不到ImageBitmap的方法：

WAGame.js:3 gameThirdScriptError
ImageBitmap is not defined
ReferenceError: ImageBitmap is not defined

这里我们也可以通过改three.js源码，但是最简单的方式就是在main.js中添加这个方法：

GameGlobal.ImageBitmap = function() {}

GameGlobal是小游戏中自带的一个全局对象，还有这里面canvas2 = wx.createCanvas() 就属于之前说的离屏canvas, 必须以纹理的方式渲染,不然我们是看不到内容的,因为小游戏只允许存在一个主屏，这样我们就在3D场景中绘制出了2D平面，这里我们需要用sprite.scale.set()来放大我们的内容，不然可能因为粒子太小，而看不到内容。这里我并未将3D场景绘制出来，有兴趣的可以尝试将辅助坐标轴绘制出来。

（3D场景绘制2D平面，看起来很容易，但是真正要控制好缺是很难的，特别是有时用canvas写的，scale 之后会模糊，这也是我在自学开发中遇到的问题，如果有解决方案的朋友，希望可以一起分享分享）

代码我上传到我新的github账号上：https://github.com/YDMua/smallGame
能帮到朋友们的，麻烦请给个星。