three.js 将图片马赛克化的示例代码


Posted in Javascript onJuly 31, 2020

这篇郭先生来说说BufferGeometry,类型化数组和粒子系统的使用,并且让图片有马赛克效果(同理可以让不清晰的图片清晰化),如图所示

three.js 将图片马赛克化的示例代码

1. 解析图片

解析图片和上一篇一样

initCanvas() {
  canvas = document.createElement('canvas');
  content = canvas.getContext('2d');
  canvas.width = 1600;
  canvas.height = 1200;
  img = new Image();
  img.crossOrigin = '*';
  img.src = "/static/images/base/girl.jpg";
  img.onload = () => {
    content.drawImage(img, 0, 0, canvas.width, canvas.height);
    imgDate = content.getImageData(0, 0, canvas.width, canvas.height);
    this.createPotCloud();  //创建点云
  };
}

2. 操作像素点

createPotCloud() {
  if (points) {
    scene.remove(points)
  }
  let cw = Math.floor(canvas.width / size);
  let ch = Math.floor(canvas.height / size);
  particles = cw * ch;
  geometry = new THREE.BufferGeometry();
  positions = new Float32Array(Math.floor(particles * 3));
  positions_af = new Float32Array(Math.floor(particles * 3));
  var colors = new Float32Array(Math.floor(particles * 3));
  for (var i = 0; i < positions.length; i += 1) {

    positions[3 * i] = - canvas.width / 2 + (i % cw) * size;
    positions[3 * i + 1] = canvas.height / 2 + Math.floor((-1 - i) / cw) * size;
    positions[3 * i + 2] = 0;

    let selectPos = size * (i % cw) + Math.floor(i / cw) * cw * size * size;
    colors[3 * i] = imgDate.data[4 * selectPos] / 255.0;
    colors[3 * i + 1] = imgDate.data[4 * selectPos + 1] / 255.0;
    colors[3 * i + 2] = imgDate.data[4 * selectPos + 2] / 255.0;
  }
  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3))
  geometry.dynamic = true;
  geometry.attributes.position.needsUpdate = true;
  var material = new THREE.PointsMaterial({ size: size, vertexColors: THREE.VertexColors })
  points = new THREE.Points(geometry, material);
  points.name = 'points';
  scene.add(points);
  loaded = true;
},

可以不用纠结代码,核心思想其实我们只需要每隔一定的颜色点取出一个颜色点,然后将这个颜色赋予到geometry的color属性上,就可以了,也可以每隔两行、两列取一个点,但是图片上面的点是一维的,所以需要一些数学方法,

three.js 将图片马赛克化的示例代码

如图所示,原理很简单哦。将不清晰的图片清晰化,就是需要插入更多的像素点,插入的像素点,需要根据已存在的像素点的颜色进行插值,比如原图的像素点1为0xffffff,像素点2的颜色为0xdddddd,则插在两个像素点之间像素点的颜色为0xeeeeee,以此类推。

以上就是three.js 将图片马赛克化的示例代码的详细内容,更多关于three.js 将图片马赛克化的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
Jul 27 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
解决layui页面按钮点击无反应,也不报错的问题
Sep 29 Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 Javascript
JavaScript控制台的更多功能
Apr 28 Javascript
three.js 如何制作魔方
Jul 31 #Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 #Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 #Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 #Javascript
vue实现给div绑定keyup的enter事件
Jul 31 #Javascript
简单了解JavaScript作用域
Jul 31 #Javascript
基于vue--key值的特殊用处详解
Jul 31 #Javascript
You might like
PHP的SQL注入过程分析
2012/01/06 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
php简单统计中文个数的方法
2016/09/30 PHP
js加解密 脚本解密
2008/02/22 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
Python实现SVN的目录周期性备份实例
2015/07/17 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Python实现多进程的四种方式
2019/02/22 Python
python实现智能语音天气预报
2019/12/02 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
某公司部分笔试题
2013/11/05 面试题
总经理助理的八要求
2013/11/12 职场文书
20岁生日感言
2014/01/13 职场文书
2015年父亲节活动总结
2015/02/12 职场文书