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 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 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
基于mysql的论坛(7)
2006/10/09 PHP
PHP+javascript模拟Matrix画面
2006/10/09 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
javascript 简练的几个函数
2009/08/29 Javascript
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python检查指定文件是否存在的方法
2015/07/06 Python
Python变量作用范围实例分析
2015/07/07 Python
Python实现合并字典的方法
2015/07/07 Python
python list转矩阵的实例讲解
2018/08/04 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
市场营销个人求职信范文
2014/02/02 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
创先争优活动方案
2014/02/12 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
学校食堂管理制度
2015/08/04 职场文书
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android