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 相关文章推荐
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
Element el-button 按钮组件的使用详解
Feb 01 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
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
main.php
2006/12/09 PHP
一个用php实现的获取URL信息的类
2007/01/02 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
php5.x禁用eval的操作方法
2018/10/19 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
python使用udp实现聊天器功能
2018/12/10 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
python输入错误后删除的方法
2019/10/12 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
使用Pytorch来拟合函数方式
2020/01/14 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
水果花束:Fruit Bouquets
2017/12/20 全球购物
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
公司办公室岗位职责
2014/03/19 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
2015年信访工作总结
2015/04/07 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
公司考勤管理制度
2015/08/04 职场文书