WeChat mini game three.js development

How to develop WeChat mini-games with three.js

First, we use the WeChat developer tools to create a module, then delete the unnecessary content in it, put three.js into our project, and introduce it in main.js:

./js目录下：

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

Here I write with an example that is common in 3D games and is troublesome for beginners: drawing 2D planes in 3D scenes

One: First, we need to define our scene, camera, and render it (the canvas here is exposed in weapp-adapter.js, it is the main screen canvas, and the canvases created later are all off-screen canvases, which must depend on Home screen canvas):

    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)

In this way, we have drawn a simple gray scene, but when opening the developer tools, the screen is found to be black, but no error is reported

But when we debug it with a real machine, we find the following errors:

This error is caused because createElementNS is not supported in the mini game, then we can change all createElementNS to createElement. There are two ways, one is to change the three.js source code (trouble), and the other is to directly modify the weapp -adapter.js, find var doucument = {}, write the following code in the object:

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

Re-edit the code and find that we can see the gray background.

Two: Then we draw our 2d content in the 3d scene. Here we use sprite textures for 2D rendering. If you don't know what sprite stickers are, you can visit https://threejs.org/docs/#api/materials/SpriteMaterial , To draw in a textured way, the code is as follows:

    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)

You may encounter an error here, and the ImageBitmap method cannot be found in the project:

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

Here we can also change the three.js source code, but the easiest way is to add this method in main.js:

GameGlobal.ImageBitmap = function() {}

GameGlobal is a global object that comes with the mini game, and here canvas2 = wx.createCanvas() belongs to the off-screen canvas mentioned earlier, which must be rendered in a textured way, otherwise we will not be able to see the content, because the small The game only allows one main screen, so we draw a 2D plane in the 3D scene. Here we need to use sprite.scale.set() to enlarge our content, otherwise the content may not be visible because the particles are too small. I haven't drawn the 3D scene here. If you are interested, you can try to draw the auxiliary coordinate axis.

(It looks easy to draw a 2D plane in a 3D scene, but it is difficult to really control the lack, especially when it is written in canvas sometimes, the scale will be blurred, which is also a problem I encountered in self-study development, if there is Friends of the solution, I hope you can share it together)

I uploaded the code to my new github account: https://github.com/YDMua/smallGame
Can help friends, please give a star.