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

 更新时间:2020-08-01 06:25:45   作者:佚名   我要评论(0)

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

1. 解析图片流


canvas = document.createE

今天郭先生说一下用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 制作动态二维码的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:

  • vue中实现动态生成二维码的方法
  • 一行Python代码制作动态二维码的实现
  • 用python生成(动态彩色)二维码的方法(使用myqr库实现)
  • Python使用MyQR制作专属动态彩色二维码功能
  • C#基于QRCode实现动态生成自定义二维码图片功能示例
  • 微信小程序动态生成二维码的实现代码
  • Android 动态加载二维码视图生成快照的示例
  • nodejs动态创建二维码的方法
  • Angular JS 生成动态二维码的方法
  • 使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
  • JavaScript动态生成二维码图片

相关文章

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

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

    今天郭先生说一下用canvas解析图片流,然后制作一个动态二维码的小案例,话不多说先上图,这是郭先生的微信二维码哦! 1. 解析图片流 canvas = document.createE
    2020-08-01
  • Java内存模型知识详解

    Java内存模型知识详解

    1. 概述   多任务和高并发是衡量一台计算机处理器的能力重要指标之一。一般衡量一个服务器性能的高低好坏,使用每秒事务处理数(Transactions Per Second,TPS)这
    2020-08-01
  • Java中Thread.join()的使用方法

    Java中Thread.join()的使用方法

    概要 本文分三个部分对Thread.join()进行分析: 1. join() 的示例和作用 2. join() 源码分析 3. 对网上其他分析 join() 的文章提出疑问 1. join() 的示例和作用 1.1
    2020-08-01
  • Python使用shutil模块实现文件拷贝

    Python使用shutil模块实现文件拷贝

    主要作用与拷贝文件用的。 1.shutil.copyfileobj(文件1,文件2):将文件1的数据覆盖copy给文件2。 import shutil f1 = open("1.txt",encoding="utf-8") f2 = o
    2020-08-01
  • vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

    vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

    在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,
    2020-08-01
  • Java 操作Properties配置文件详解

    Java 操作Properties配置文件详解

    java中的properties文件是一种配置文件,主要用于表达配置信息,文件类型为*.properties,格式为文本文件,文件的内容是格式是"键=值"的格式,在properties 文件
    2020-08-01
  • Python如何执行精确的浮点数运算

    Python如何执行精确的浮点数运算

    问题 你需要对浮点数执行精确的计算操作,并且不希望有任何小误差的出现。 解决方案 浮点数的一个普遍问题是它们并不能精确的表示十进制数。 并且,即使是最简单
    2020-08-01
  • Python高并发解决方案实现过程详解

    Python高并发解决方案实现过程详解

    一.cdn加速 简单说就是把静态资源放到别人服务器上 全称:Content Delivery Network或Content Ddistribute Network,即内容分发网络 基本思路: 尽可能避开互联
    2020-08-01
  • Python 如何测试文件是否存在

    Python 如何测试文件是否存在

    问题 你想测试一个文件或目录是否存在。 解决方案 使用 os.path 模块来测试一个文件或目录是否存在。比如: >>> import os >>> os.path.exists('/etc/passwd') Tr
    2020-08-01
  • Django+Uwsgi+Nginx如何实现生产环境部署

    Django+Uwsgi+Nginx如何实现生产环境部署

    如何在生产上部署Django&#63; Django的部署可以有很多方式,采用nginx+uwsgi的方式是其中比较常见的一种方式。 uwsgi介绍 uWSGI是一个Web服务器,它实现了WSG
    2020-08-01

最新评论