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 26 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
OpenLayers3实现对地图的基本操作
Sep 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&amp;MYSQL服务器配置说明
2006/10/09 PHP
如何写php程序?
2006/12/08 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
js对象的复制继承实例
2015/01/10 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
2015/06/25 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
用Python解析XML的几种常见方法的介绍
2015/04/09 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
python操作redis数据库的三种方法
2020/09/10 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
视图的作用
2014/12/19 面试题
经管应届生求职信
2013/11/17 职场文书
教师产假请假条范文
2014/04/10 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
本科生自荐信
2014/06/18 职场文书
岗位说明书标准范本
2014/07/30 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android