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 相关文章推荐
js 页面执行时间计算代码
Mar 04 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
详解react关于事件绑定this的四种方式
Mar 09 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 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多文件上传功能实现原理及代码
2013/04/18 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
php模拟post提交数据的方法
2015/02/12 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
浅谈Angular.js中使用$watch监听模型变化
2017/01/10 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
Python之PyUnit单元测试实例
2014/10/11 Python
利用python发送和接收邮件
2016/09/27 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
Python语法分析之字符串格式化
2019/06/13 Python
自我鉴定写作要点
2014/01/17 职场文书
保外就医申请书范文
2015/08/06 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python