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()// 使用正交相机绘制2Dthis.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开放域里讲过，这里不再多讲，基本跟那里的写法一致。

html5游戏开发QQ群 639636145

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

解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题
解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题参考文章: (1)解决CocosCreator 在微信小游戏中使用Socket.io 报错的问题 (2)https:// ...
在微信小游戏中实现语音互动
之前在unity里尝试用过语音控制,当时的想法是实时控制游戏角色的移动与攻击,这在通过在线api解析语义的方式下体验一般,不过也想到在实时性要求不那么高的互动场景应该可以用起来.这里就在微信小游戏中尝 ...
h5小游戏嵌入到微信小游戏中（以egret为例）
H5小游戏源代码不能直接转换为微信小游戏发布,但是可以把现有的h5小游戏嵌入到微信小游戏中,这里使用egret举例.使用egret创建一个空的微信小游戏,在main.ts中资源加载完成后执行Webvi ...
微信3D小游戏系列一：在微信小游戏中使用threejs
文章目录环境配置下载开发者工具目录结构引入Three.js 在小程序中运行 threejs 目标效果小程序代码环境配置下载开发者工具下载地址: https://developers.w ...
在微信小游戏中开发一个贪食蛇
为什么80%的码农都做不了架构师?>>> 我自己也写过一个贪食蛇的小游戏,不过是对dom的操作,微信小游戏是采用js语法基于canvas的开发.为了省事在网上直接搜了一个基于c ...
egret引擎中使用tiled运行在微信小游戏中
egret的官方文档,对tiled的介绍不是很细致,很多东西都需要摸索.现在把踩的坑记录下来.作为一个备忘引用tiledmap的库在GitHub上下载egret的tiledmap支持库:https ...
Cocos Creator开发技术研究：微信小游戏中音效中断问题处理
转载自麒麟子博客:https://qilinzi.blog.csdn.net/article/details/89488323 音效可谓是一个小游戏的灵魂了. 某些玩法离开了音效更是不可能,比如别踩白 ...
在微信小游戏中使用three.js显示3D图形
年前,微信发布了一个重磅消息:微信小程序的小游戏功能,千呼万唤始出来! 笔者之前从未接触过微信小程序和WebGL的开发,但是却一直有留意相关技术的发展,大概听说原来微信小程序是不支持WebGL 3D技 ...
微信小游戏中监听一个按钮的点击事件方法
首先肯定是看API文档,如图所示但初学者特别是自学者看的一脸迷惘不知所措,又没有实例.所有我来写一下我的做法,有什么错误请大家指出一起交流一下哈! 直接看代码清楚点 let points = [{x ...

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

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

最新文章

热门文章