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的数组的扩展实例代码
Jul 09 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
JS添加删除DIV的简单实例
Jul 08 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
js函数和this用法实例分析
Mar 13 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 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文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
php将html转为图片的实现方法
2017/05/19 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
js实现文字垂直滚动和鼠标悬停效果
2015/12/31 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
详细介绍Python中的偏函数
2015/04/27 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
业务部经理岗位职责
2014/01/04 职场文书
学生干部的自我评价分享
2014/01/18 职场文书
满月酒主持词
2014/03/27 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
地道战观后感300字
2015/06/04 职场文书
闪闪红星观后感
2015/06/08 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
一条 SQL 语句执行过程
2022/03/17 MySQL
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫