微信小游戏中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 相关文章推荐
JavaScript的parseInt 取整使用
May 09 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
简单的js表格操作
Sep 24 Javascript
JavaScript手风琴页面制作
May 17 Javascript
ReactNative中使用Redux架构总结
Dec 15 Javascript
Angular2之二级路由详解
Aug 31 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
Apr 10 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 Javascript
谈谈JavaScript中的函数
Sep 08 Javascript
Openlayers实现地图全屏显示
Sep 28 Javascript
原生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
PHP 中执行系统外部命令
2006/10/09 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
php格式化日期实例分析
2014/11/12 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
javascript 常用关键字列表集合
2007/12/04 Javascript
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
浅谈javascript中的instanceof和typeof
2015/02/27 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
[03:12]2016完美“圣”典风云人物:单车专访
2016/12/02 DOTA
Python模拟登录验证码(代码简单)
2016/02/06 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
Python 学习教程之networkx
2019/04/15 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
keras 自定义loss层+接受输入实例
2020/06/28 Python
Python如何读写二进制数组数据
2020/08/01 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
经典禁毒标语
2014/06/16 职场文书
2015年母亲节寄语
2015/03/23 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏