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


Posted in Javascript onJuly 31, 2020

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

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

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是什么样的呢?如下图

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

这是一个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 制作动态二维码的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript 设计模式学习 Singleton
Jul 27 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
javascript 闭包详解
Feb 15 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
javascript实现放大镜功能
Dec 09 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 #Javascript
vue抽出组件并传值实例
Jul 31 #Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 #Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 #Javascript
原生JS实现记忆翻牌游戏
Jul 31 #Javascript
js实现跳一跳小游戏
Jul 31 #Javascript
js实现翻牌小游戏
Jul 31 #Javascript
You might like
对盗链说再见...
2006/10/09 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
jQuery实现友好的轮播图片特效
2015/01/12 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
javascript实现固定侧边栏
2021/02/09 Javascript
python:socket传输大文件示例
2017/01/18 Python
python分析作业提交情况
2017/11/22 Python
python基础教程项目三之万能的XML
2018/04/02 Python
django使用LDAP验证的方法示例
2018/12/10 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
python模块导入的方法
2019/10/24 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
建议书怎么写
2014/03/12 职场文书
倡议书范文格式
2014/05/12 职场文书
经典团队口号大全
2014/06/21 职场文书
计算机专业自荐信
2015/03/05 职场文书
小学新课改心得体会
2016/01/22 职场文书