threejs 微信小游戏中的离屏渲染做UI和排行榜

微信小游戏对threejs真的是一次桎酷啊。。。呵呵。
规定不能用html锁死了我们之前两个html标签的可能了。。。

不过微信还是允许了大家的离屏渲染，要不是我们在跳一跳之类的游戏中也看不到排行榜和基本的UI了。。。

相关的理论知识与概念大家可以看官网这篇文章；
https://developers.weixin.qq.com/community/develop/doc/00042c94bc0d1058b82761a0052809

不过可惜官方并没有给一个切实可行的代码片断，说的全是理论；

总结一下：
在项目中我们只能有一个canvas，但是我们有离屏相当于有了两个世界；
UI是平面的threejs是三维的，但是我们可以在threejs中有多scenes/camers来解决UI的二维问题；

主域中：
我们先建立一个不同的scenes/camers

this.scene = new THREE.Scene()
 // 使用正交相机绘制2D
 this.camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 0, 10000)

然后我们开始设定开放域离屏canvas的设定以及他的容器；

this.open = wx.getOpenDataContext()
this.sharedCanvas = this.open.canvas
const {pixelRatio, windowHeight, windowWidth} = wx.getSystemInfoSync()
//一定要在主域中设定宽高
this.sharedCanvas.width = windowWidth * pixelRatio ; 
this.sharedCanvas.height = windowHeight * pixelRatio;
//把开放域中的canvas弄到材质里，以后可以用mesh渲染出来
this.rankingTexture = new THREE.CanvasTexture(this.sharedCanvas)
this.rankingTexture.minFilter = this.rankingTexture.magFilter = THREE.LinearFilter
this.rankingTexture.needsUpdate = true
let geometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight)
let material = new THREE.MeshBasicMaterial({ map: this.rankingTexture, transparent: true })
this.ranking = new THREE.Mesh(geometry, material)

以上代码可以让我们的上屏内容直接进入三维的世界，但仍然有些小问题，即
我们如果是作微信排行榜用的，微信的开放域数据是封闭的，他还有一个加载数据过程，这个过程还不能在外面做，他是个异步的过程，这样我们需要有一个刷新更新机制让主域渲染出数据；

setInterval(() => {
	      this.updateRanking()
	    }, 2000)
updateRanking(){
		/**
   * 更新排行榜
   */
    	this.rankingTexture.needsUpdate = true
	}

以上代码我们可以保证主域可以百分之百刷到数据了。

开放域中的相关代码我在另一篇文章pixijs开放域 里讲过，这里不再多讲，基本跟那里的写法一致。

---

推荐一个个人微信小游戏作品 最难捕鱼