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 相关文章推荐
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
javascript document.execCommand() 常用解析
Dec 14 Javascript
Jquery下:nth-child(an+b)的使用注意
May 28 Javascript
js 幻灯片的实现
Dec 06 Javascript
js数组依据下标删除元素
Apr 14 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
vue transition 在子组件中失效的解决
Nov 12 Javascript
JS快速实现简单计算器
Apr 08 Javascript
浅谈vue的第一个commit分析
Jun 08 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
用PHP制作静态网站的模板框架(三)
2006/10/09 PHP
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
jquery 问答知识整理
2010/02/11 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
js实现微博发布小功能
2017/01/12 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
解决vue打包 npm run build-test突然不动了的问题
2020/11/13 Javascript
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
美国电视购物:QVC
2017/02/06 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
计算机专业学生求职信分享
2013/12/15 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
电子商务专业自荐信
2014/06/02 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
2015年公务员试用期工作总结
2015/05/28 职场文书
初一年级组工作总结
2015/08/12 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
详解Redis主从复制实践
2021/05/19 Redis
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS