three.js 制作动态二维码的示例代码

今天郭先生说一下用canvas解析图片流,然后制作一个动态二维码的小案例,话不多说先上图,这是郭先生的微信二维码哦!

1. 解析图片流

canvas = document.createElement('canvas');//创建canvas画布
content = canvas.getContext('2d');//获取画布的上下文
canvas.width = 310;//设置尺寸
canvas.height = 310;
img = new Image();//创建一张图片
img.src = require("../assets/images/base/wechat.png");//设置图片地址
img.onload = () => {
    //在图片加载后
  content.drawImage(img, 0, 0, canvas.width, canvas.height);//将图片添加到画布,并设置宽高
  imgData = content.getImageData(0, 0, canvas.width, canvas.height).data;//获取画布数据
};

imgData是什么样的呢?如下图

这是一个Uint8ClampedArray的类型化数组,这个数组出现最多的也是在imgData上。它会将负数归入0,大于255的数归入255,所以取模就不用了。我们再来看这个数组的长度是384400是怎么来的呢?因为我们设置了画布长宽为310,而imgData四位代表一个rgba像素点,也就是imgData[0]是红色通道,imgData[1]是绿色通道,imgData[2]是蓝色通道,imgData[3]是透明通道…依次循环,所以310 * 310 * 4 = 384400。

2. 处理像素点,画出二维码

for (var i = 0; i < 31 * 31; i++) {
    //random_position为各个小平面块打乱时的位置信息,我设置小平面一共有31 * 31个
  random_position.push([Math.floor(Math.random() * 300 - 150), Math.floor(Math.random() * 300 - 150), Math.floor(Math.random() * 300 - 150)])
}
var color = new Array(310).fill('').map(d => []);//color设置成310个数组
for (var i = 0; i < 310; i++) {
  for (var j = 0; j < 310; j++) {
    let clr = imgData[(i * 310 + j) * 4] + imgData[(i * 310 + j) * 4 + 1] + imgData[(i * 310 + j) * 4 + 2];
    clr = clr > 382 ? 'light' : 'black'; //因为颜色是有深色块和浅色块组成,他们的分界就是rgb通道颜色值之和小于等于127+127+127之和。
    color[i].push(clr)//每个数组有310项,每项的值为'light'或者'black'
  }
}
var color1 = [];//设置color1为小平面颜色数组31 * 31。
color.filter((d, i) => (i + 6) % 10 == 0).forEach((dd, ii) => color1[ii] = dd.filter((d, i) => (i + 6) % 10 == 0));//每10个像素,筛选出1个像素作为小平面的颜色,选取的位置尽量在10个的中间选择,毕竟有的图片比较模糊。
for (var i = 0; i < color1.length; i++) {//31 * 31的循环
  for (var j = 0; j < color1[i].length; j++) {
    var geometry = new THREE.PlaneGeometry(10, 10);
    var material = new THREE.MeshBasicMaterial({
      color: 0xffffff,
      side: THREE.DoubleSide,
      transparent: true,
      opacity: color1[i][j] == 'black' ? 0 : 1,
    });
    var mesh = new THREE.Mesh(geometry, material);//小方块网格
    origin_position.push([j * 10 - 15 * 10, 15 * 10 - i * 10, 0]);//保存序列换后小方块的位置
    mesh.position.set(random_position[j + i * j][0], random_position[j + i * j][1], random_position[j + i * j][2]);//先将小方块的位置设置成打乱的位置,便于动画播放。
    mesh.name = 'plane';
    group.add(mesh);//将所有小平面放到数组,便于操作。
  }
}
scene.add(group);

这部分代码主要是计算部分,没什么技术含量。

3. 实现tween动画

var pos = { time: 0 };
tween1 = new TWEEN.Tween(pos).to({ time: 1 }, 3000);
tween2 = new TWEEN.Tween(pos).to({ time: 0 }, 3000);
tween1.easing(TWEEN.Easing.Quadratic.In);
tween2.easing(TWEEN.Easing.Quadratic.Out);
tween1.onUpdate(onUpdate);
tween2.onUpdate(onUpdate);
tween1.start();

function onUpdate() {
  let time = this._object.time;
  group.children.forEach((d, i) => {
    d.position.set(time * origin_position[i][0] + (1 - time) * random_position[i][0], time * origin_position[i][1] + (1 - time) * random_position[i][1], (1 - time) * random_position[i][2]);
  })
}

这部分只是用了tween的基础功能,请自行查看tween文档。

以上就是three.js 制作动态二维码的示例代码的详细内容,更多关于three.js 制作动态二维码的资料请关注我们其它相关文章!

时间: 2020-07-30

C#基于QRCode实现动态生成自定义二维码图片功能示例

本文实例讲述了C#基于QRCode实现动态生成自定义二维码图片功能.分享给大家供大家参考,具体如下: 二维码早就传遍大江南北了,总以为它是个神奇的东西,其实细细研究之后发现也没想象的那么神秘,碰巧最近项目中需要动态生成二维码,解决完实际问题之后,简单总结整理一下.项目中除了动态生成二维码之外,还实现了动态生成自定义图片,二维码可以是其中的元素. 设置图片的数据源为动态图片 <body> <form id="form1" runat="server"

Angular JS 生成动态二维码的方法

一.场景 二维码的场景,很多.这里是二维码一种小场景,比如分享一个链接,商品链接,项目链接,优惠券链接- 技术实现,如果用后端实现,需要构造输出一个图片流.或者后端生产二维码图片,给图片地址就好了.弊端,这个二维码就是一个链接,后端的文件 IO 操作,还得考虑存储.太费力. 如果前端实现,这样就很轻松了.这只是个分享二维码,分享出去给人家扫一扫.利用前端的 canvas,这里坐下调研. jq 封装的 qrcode.js ,文章网上一大堆. angular js :https://github.c

用python生成(动态彩色)二维码的方法(使用myqr库实现)

最近真的感觉到了python生态的强大(倒吸一口凉气) 现在介绍一个可以生成动态二维码的库(myqr) 效果如图: 第一步要安装myqr库 在cmd中直接用pip安装 pip install myqr 第二步 from MyQR import myqr import os version, level, qr_name = myqr.run( words="https://www.baidu.com", # 可以是字符串,也可以是网址(前面要加http(s)://) version=1

微信小程序动态生成二维码的实现代码

效果图如下: 实现 wxml <!-- 存放二维码的图片--> <view class='container'> <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image> </view> <!-- 画布,用来画二维码,只用来站位,不用来显示--> <view class=&qu

Android 动态加载二维码视图生成快照的示例

1.需求背景 需要实现一个动态加载但不显示出来的视图,且该视图上有个动态生成的二维码,最后用其去生成一张快照(也就是图片). (常见这种情况是来源于"图片分享"的功能需求,与普通图片分享不同在于,该快照图片是动态加载不显示的.) 2.需求功能拆解 动态二维码的实现 动态视图生成快照的实现 3.踩坑点提要 获取不到动态视图的bitmap 无法获取最新动态视图的bitmap 4.开发实现 动态加载的视图的布局文件代码: <?xml version="1.0" en

nodejs动态创建二维码的方法

本文实例为大家分享了nodejs动态创建二维码的具体代码,供大家参考,具体内容如下 <!--弹出二维码--> <div class="qrcode"> <div> <p id="saoma">扫描二维码</p> </div> </div> js代码: $.ajax({ type: 'POST', url: '/house', data: { data:'你的数据' }, dataTy

JavaScript动态生成二维码图片

1.html代码 <div id="qrcode" style="width:200px; height:200px;position: fixed;bottom: 40%; right: 20%;"></div> 2.引入外部js文件 <script src="QRCode.js"></script> 3.方法调用 var qrcode = new QRCode(document.getEleme

使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

0 Jquery.Qrcode简介 Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服务端压力,尤其是在大量使用二维码的系统中.Jquery.Qrcode主要包括以下参数设置: •render 定义二维码的渲染方式,有table和canvas两种渲染方式 •width 定义二维码的宽度 •height 定义二维码的高度 •text 定义二维码内容 •typeNumber 二维码的计算

Python使用MyQR制作专属动态彩色二维码功能

Python中有一个非常有趣好玩的库MyQR,不仅可以制作各种漂亮的二维码,还可以生成动态彩色二维码. MyQR是一个能够生成自定义二维码的第三方库,你可以根据需要生成普通二维码.带图片的艺术二维码,也可以生成动态二维码. 生成动态二维码 效果图如下: 二维码扫描上图看看 我们首先要安装MyQR库,直接用pip3 install myqr(or MyQR).需要注意的是MyQR依赖于Python3,在Python2的环境下可能无法正常运行. 这个库提供了两种使用方法,一种是直接使用命令行的方式,

一行Python代码制作动态二维码的实现

在GitHub上发现了一个比较有意思的项目,只需要一行Python代码就可以快捷方便生成普通二维码.艺术二维码(黑白/彩色)和动态GIF二维码. GitHub网站参加:https://github.com/sylnsfar/qrcode 用法比较简单,直接通过pip安装即可. pip3 install myqr 安装过程如下所示: 安装完成后,就可以基于命令指令生成想要的二维码了,myqr模块参数说明如下: 主要参数翻译如下: -v :定义二维码的大小,范围为 1 ~ 40,默认大小取决于输入的

vue中实现动态生成二维码的方法

最近项目中有个裂变分享的需求,需要在页面中根据分享人的身份动态生成二维码图片放置在页面中,所以研究了一下这个功能的实现,同时把实现过程记录如下: 1.引入二维码生成模块 npm install qrcodejs2 --save 注意:此处安装qrcodejs2,安装依赖后可在main方法中进行全局引用设置,也可单独某个页面中进行引用设置. 2.引入使用 import QRCode from 'qrcodejs2'; 备注:在main中设置全局可使用 Vue.prototype.qrCode 3.

详解ZXing-core生成二维码的方法并解析

二维码无处不在,扫一扫有礼品哦,现在二维码这么流行,想必大家不是很清楚二维码是怎么生成的吧,现在小编通过给大家分享本文帮助大家学习二维码生成的方法. 其实主要是利用goggle发布的jar来使用的此功能. 1.二维码的生成 将Zxing-core.jar 包加入到classpath下. 二维码的生成需要借助MatrixToImageWriter类,该类是由Google提供的,可以将该类拷贝到源码中,这里我将该类的源码贴上,可以直接使用. 直接可以生成二维码的代码 public void test

Python基于QRCode实现生成二维码的方法【下载,安装,调用等】

本文实例讲述了Python基于QRCode实现生成二维码的方法.分享给大家供大家参考,具体如下: QR码是一种矩阵码,或二维空间的条码,1994年由日本Denso-Wave公司发明.QR是英文Quick Response的缩写,即快速反应的意思,源自发明者希望QR码可让其内容快速被解码.QR码常见於日本,并为目前日本最流行的二维空间条码.QR码比普通条码可储存更多资料,亦无需像普通条码般在扫描时需直线对准扫描器. qrcode是Python的第三方模块,依赖于Python 图像库:PIL(Pyt

Python实现将文本生成二维码的方法示例

本文实例讲述了Python实现将文本生成二维码的方法.分享给大家供大家参考,具体如下: #coding:utf-8 ''' Python生成二维码 v1.0 主要将文本生成二维码图片 测试一:将文本生成白底黑字的二维码图片 测试二:将文本生成带logo的二维码图片 ''' __author__ = 'Xue' import qrcode from PIL import Image import os #生成二维码图片 def make_qr(str,save): qr=qrcode.QRCode

ASP.NET生成二维码的方法总结

本文实例总结了ASP.NET生成二维码的方法.分享给大家供大家参考,具体如下: 分享一例c#生成二维码的代码,直接引用ThoughtWorks.QRCode.dll 类生成二维码,有需要的朋友参考下. 方法1.直接引用ThoughtWorks.QRCode.dll 类,生成二维码. 代码示例: ThoughtWorks.QRCode.Codec.QRCodeEncoder encoder = new QRCodeEncoder(); encoder.QRCodeEncodeMode = QRCo

Symfony生成二维码的方法

本文实例讲述了Symfony生成二维码的方法.分享给大家供大家参考,具体如下: 现在网上能搜到很多关于使用PHP生成二维码的例子,主要是两种方法: 第一种:google开放api,如下: $urlToEncode="http://blog.it985.com"; generateQRfromGoogle($urlToEncode); function generateQRfromGoogle($chl, $widhtHeight = '150', $EC_level = 'L', $m