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

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

在微信小游戏中,把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离屏画布内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-10-09

微信小游戏之使用three.js 绘制一个旋转的三角形

three.js是一个可以使用javascript绘制3d图形的库,它对WebGL的api进行封装,使开发更加方便,就像jQuery对DOM的api进行封装一样.接下来就记录一下在小游戏中绘制一个 旋转的三角形的步骤: 一. 初始化项目 下载微信官方的开发者工具,然后新建项目 appid选择测试号即可,项目路径自行指定 用编辑器打开项目,得到如下目录: 然后除了game.js,game.json, project.config.json全部删除,并把game.js中的内容清空. game.js是

500行代码使用python写个微信小游戏飞机大战游戏

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手. 帮助蹲厕族.YP族.饭圈女孩在无聊之余可以有一样东西让他们振作起来!让他们的左手 / 右手有节奏有韵律的朝着同一个方向来回移动起来! 这是史诗级的发明,是浓墨重彩的一笔,是-- 在一阵抽搐后,我结束了游戏,瞬时觉得一切都索然无味,正在我进入贤者模式时,突然想到,如果我可以让更多人已不同的方式体会到这种美轮美奂的感觉岂不美哉? 所以我打开电脑,创建了一个 plan_game.py-- 先

python实现飞机大战微信小游戏

0.前言 我学一种语言,可以说学任何东西都喜欢自己动手实践,总感觉自己动手一遍,就可以理解的更透彻,学python也一样,自己动手写代码,但更喜欢做点小东西出来,一边玩一边学.下面我就展示一下我最近做的一个小游戏. 1.素材准备 首先我们先来预览一下游戏的最终运行界面 根据游戏界面,我们可以清楚的知道必须要先准备游戏背景图片,飞机图片,子弹图片等等.这些素材我已经放到网上, 点我下载 ,里面包括了我的代码和图片素材. 2.代码部分 库依赖: pygame 本游戏主要有两个py文件,主文件plan

python实现飞机大战小游戏

本文实例为大家分享了python实现飞机大战的具体代码,供大家参考,具体内容如下 初学Python,写了一个简单的Python小游戏. 师出bilibili某前辈 pycharm自带了第三方库pygame,安装一下就好了,很方便. 虽然很多大佬已经给出了步骤,我这里还是啰嗦一下,也为了自己巩固一下. 上图: 这里再给出代码的逻辑架构 plane_main.py import pygame from plane_sprites import * class PlaneGame(object): "

python实现飞机大战项目

本文实例为大家分享了python实现飞机大战的具体代码,供大家参考,具体内容如下 引用了小甲鱼的框架,往上面添加了一些新功能 1.我方飞机模块 import pygame class MyPlane(pygame.sprite.Sprite): def __init__(self,bg_size): pygame.sprite.Sprite.__init__(self) self.image1 = pygame.image.load(r'E:\learn pygame\image\me1.png

python实现飞机大战

本文实例为大家分享了python实现飞机大战的具体代码,供大家参考,具体内容如下 实现的效果如下: 主程序代码如下: import pygame from plane_sprites import * class PlaneGame(object): """飞机大战主游戏""" def __init__(self): print("游戏初始化") # 1,绘制屏幕窗口 self.screen = pygame.display.

利用Kotlin实现破解Android版的微信小游戏--跳一跳

前言 昨天下午,微信小程序开放了游戏接口,朋友圈瞬间炸开了锅,尤其是"跳一跳"这款游戏的成绩单,在朋友圈刷了一波又一波. 下面就来给大家介绍了关于Kotlin破解Android版的微信小游戏跳一跳的相关内容,让大家可以好好炫耀一番. 成果 跳一跳 微信小程序可以玩游戏了,我们来破解一下<跳一跳>这个官方出品的小游戏吧. 思路 用usb调试安卓手机,用adb截图并用鼠标测量距离,然后计算按压时间后模拟按压. $ adb shell input swipe <x1>

python实现井字棋小游戏

本文为大家分享了python实现井字棋小游戏,供大家参考,具体内容如下 周五晚上上了python的选修课,本来以为老师是从python的基础语法开始的,没想到是从turtle画图开始,正好补上了我以前一些不懂的地方,有人讲一下还是比啃书好一点. 之前从图书馆借了一本python游戏编程,看了前面几章后就没怎么看了,晚上突然想看看,然后跟着教程写个游戏的.最后就有了这个井字棋的诞生,其实代码并不是很长,主要是思路,需要考虑的周全一点.代码写完后就和电脑下了好久的井字棋,一局都没赢,真的是很无奈了,

python实现飞机大战游戏(pygame版)

简介 使用python实现pygame版的飞机大战游戏: 环境:Windows系统+python3.8.0 游戏规则: 1.点击"PLAY"或者按键"P"开始游戏: 2.敌机根据设置频率从顶部随机位置生成,生成后向下移动: 3.飞船在底部中间生成,玩家使用上下左右键控制飞船移动,敲击空格键发射子弹: 4.子弹打到敌机,该敌机产生爆炸效果并累计分数到右上角: 5.消灭10只飞机后,等级升高,敌机生成频率变快,下落速度也变快: 6.当三条命都消失了,游戏结束. 游戏运行

python实现飞机大战游戏

飞机大战(Python)代码分为两个python文件,工具类和主类,需要安装pygame模块,能完美运行(网上好多不完整的,调试得心累.实现出来,成就感还是满满的),如图所示: 完整代码如下: 1.工具类plane_sprites.py import random import pygame # 屏幕大小的常量 SCREEN_RECT = pygame.Rect(0, 0, 480, 700) # 刷新的帧率 FRAME_PER_SEC = 60 # 创建敌机的定时器常量 CREATE_ENEM