微信小游戏中three.js离屏画布的示例代码


Posted in Javascript onOctober 12, 2020

国庆8天长假,重庆之行因故未成,偶得闲,用three.js结合cannon.js写个3D小游戏耍耍。

微信小游戏中three.js离屏画布的示例代码

在微信小游戏中,把three.js的3D内容在离屏画布处理,然后复制到在屏画布,方法是:

let c_toolbarHeight=140;
 
let sysInfo=wx.getSystemInfoSync();
require('./js/libs/weapp-adapter.js');
var canvas_webGL=window.canvas;
canvas_webGL.width = sysInfo.screenWidth * sysInfo.pixelRatio;
canvas_webGL.height = (sysInfo.screenHeight-c_toolbarHeight) * sysInfo.pixelRatio;
var ctx_webGL=canvas_webGL.getContext('webgl');
 
let options={context: ctx_webGL}
let renderer = new THREE.WebGLRenderer(options);
renderer.setSize(sysInfo.screenWidth, sysInfo.screenHeight-c_toolbarHeight);
renderer.setPixelRatio(sysInfo.pixelRatio);
 
function render(){
  //清除canvas_bkg的3D区域
  wx.tmGlobal.eraseZone(0,
    c_toolbarHeight,
    sysInfo.screenWidth,
    sysInfo.screenHeight);
  renderer.render(scene, camera);
  wx.tmGlobal.ctx_bkg.drawImage(canvas_webGL,
    0,c_toolbarHeight*sysInfo.pixelRatio);
  //画一条横的红线
  wx.tmGlobal.ctx_bkg.strokeStyle = '#FF8C00';
  wx.tmGlobal.ctx_bkg.lineWidth = 2;
  wx.tmGlobal.ctx_bkg.beginPath();
  wx.tmGlobal.ctx_bkg.moveTo(0,
    (c_toolbarHeight)*sysInfo.pixelRatio);
  wx.tmGlobal.ctx_bkg.lineTo(
    sysInfo.screenWidth*sysInfo.pixelRatio,
    (c_toolbarHeight)*sysInfo.pixelRatio);
  //画游戏结束临界线
  wx.tmGlobal.ctx_bkg.moveTo(0,
    (c_toolbarHeight+c_yugaoHeight)*sysInfo.pixelRatio);
  wx.tmGlobal.ctx_bkg.lineTo(
    sysInfo.screenWidth*sysInfo.pixelRatio,
    (c_toolbarHeight+c_yugaoHeight)*sysInfo.pixelRatio);
  wx.tmGlobal.ctx_bkg.stroke();
  //把canvas_bkg画到在屏画布
  wx.tmGlobal.ctx_main.clearRect(0,0,
    wx.tmGlobal.canvas_main.width,wx.tmGlobal.canvas_main.height);
    wx.tmGlobal.ctx_main.drawImage(wx.tmGlobal.canvas_bkg,0,0);
}

在vivo和iphone手机都表现正常,但是,华为手机显示不出来:

https://developers.weixin.qq.com/community/develop/doc/00026c3c1c8eb010de384a82d51000?jumpto=

其它用户也提了好久了,腾讯或华为都没有解决,试来试去,终于找到了另一种写法:

renderer = new THREE.WebGLRenderer();
let target = new THREE.WebGLRenderTarget(
  sysInfo.screenWidth*sysInfo.pixelRatio, 
  (sysInfo.screenHeight-c_toolbarHeight)*sysInfo.pixelRatio);
renderer.setRenderTarget(target);
gl=renderer.getContext();
​
var canvas_huawei=wx.createCanvas();
canvas_huawei.width=sysInfo.screenWidth*sysInfo.pixelRatio;
canvas_huawei.height=(sysInfo.screenHeight-c_toolbarHeight)*sysInfo.pixelRatio;
var ctx_huawei=canvas_huawei.getContext('2d');
​
var canvas_huawei2=wx.createCanvas();
canvas_huawei2.width=sysInfo.screenWidth*sysInfo.pixelRatio;
canvas_huawei2.height=(sysInfo.screenHeight-c_toolbarHeight)*sysInfo.pixelRatio;
var ctx_huawei2=canvas_huawei2.getContext('2d');
​
var imageData = ctx_huawei.createImageData(
  sysInfo.screenWidth*sysInfo.pixelRatio,
  (sysInfo.screenHeight-c_toolbarHeight)*sysInfo.pixelRatio);
var pixels = new Uint8Array(imageData.data.length);
​
function render(){
  //擦除背景画布的webGL区域(因为webGL是用的透明绘制)
  wx.tmGlobal.eraseZone(0,
    c_toolbarHeight,
    sysInfo.screenWidth,
    sysInfo.screenHeight);
  renderer.render(scene, camera);
  gl.readPixels(
      0,
      0,
      gl.drawingBufferWidth,
      gl.drawingBufferHeight,
      gl.RGBA,gl.UNSIGNED_BYTE,pixels);
  imageData.data.set(pixels);
  ctx_huawei.putImageData(imageData,0,0);
  //清除   
  ctx_huawei2.clearRect(0,0,canvas_huawei2.width,canvas_huawei2.height);
  //上下镜像翻转
  ctx_huawei2.translate(0,canvas_huawei2.height);
  ctx_huawei2.scale(1, -1);
  ctx_huawei2.drawImage(canvas_huawei,0,0);
  //恢复
  ctx_huawei2.translate(0,canvas_huawei2.height);
  ctx_huawei2.scale(1, -1);
  wx.tmGlobal.ctx_bkg.drawImage(canvas_huawei2,
      0,c_toolbarHeight*sysInfo.pixelRatio);
  ......
}

到此这篇关于微信小游戏中three.js离屏画布的示例代码的文章就介绍到这了,更多相关微信小游戏three.js离屏画布内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
Feb 05 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
vue生命周期的探索
Apr 03 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
原生JavaScript实现弹幕组件的示例代码
Oct 12 #Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 #Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 #Javascript
Webpack5正式发布,有哪些新特性
Oct 12 #Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 #Javascript
移动端JS实现拖拽两种方法解析
Oct 12 #Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 #Javascript
You might like
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
Python中生成Epoch的方法
2017/04/26 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
对python周期性定时器的示例详解
2019/02/19 Python
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
物理教育专业求职信
2014/06/25 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
员工自我评价范文
2015/03/11 职场文书
横空出世观后感
2015/06/09 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
python基础之函数的定义和调用
2021/10/24 Python
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android