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 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
jquery通过ajax加载一段文本内容的方法
Jan 15 Javascript
Javascript中的return作用及javascript return关键字用法详解
Nov 05 Javascript
跟我学习javascript的var预解析与函数声明提升
Nov 16 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
vue实现一拉到底的滑动验证
Jul 25 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 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
PHP_MySQL教程-第一天
2007/03/18 PHP
php英文单词统计器
2016/06/23 PHP
js 多浏览器分别判断代码
2010/04/01 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
jQuery实现放大镜案例
2020/10/19 jQuery
python局域网ip扫描示例分享
2014/04/03 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
python得到单词模式的示例
2018/10/15 Python
Django框架模板用法入门教程
2019/11/04 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
如何解决python多种版本冲突问题
2020/10/13 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
好的自荐信包括什么内容
2013/11/07 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
先进集体获奖感言
2014/02/13 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
洗车工岗位职责
2014/03/15 职场文书
医德医风演讲稿
2014/05/20 职场文书
最常使用的求职信
2014/05/25 职场文书
与美同行演讲稿
2014/09/13 职场文书
科技馆观后感
2015/06/08 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
Python数据分析之绘图和可视化详解
2021/06/02 Python
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
配置nginx负载均衡
2022/05/06 Servers