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 textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
bootstrap响应式工具使用详解
Nov 29 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
JS实现给数组对象排序的方法分析
Jun 24 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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 默默经典版本
2009/08/04 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
CentOS安装php v8js教程
2015/02/26 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
使用C++为node.js写扩展模块
2015/04/22 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
ajax前台后台跨域请求处理方式
2018/02/08 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
python对数组进行反转的方法
2015/05/20 Python
python线程池threadpool使用篇
2018/04/27 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
餐饮服务员岗位职责
2015/02/09 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
担保书格式范文
2015/09/22 职场文书