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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
JS面向对象编程浅析
Aug 28 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
vue 之 css module的使用方法
Dec 04 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 Session会话超时时间设置方法
2014/06/10 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
JS 自动安装exe程序
2008/11/30 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
15款最好的Bootstrap在线编辑器
2016/08/03 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
ES6生成器用法实例分析
2017/04/10 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
详谈python http长连接客户端
2017/06/12 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
Django中在xadmin中集成DjangoUeditor过程详解
2019/07/24 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
西门豹教学反思
2014/02/04 职场文书
情侣吵架检讨书
2014/02/05 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS