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中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
layui select动态添加option的实例
Mar 07 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
微信小程序实现菜单左右联动
May 19 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 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
php echo()和print()、require()和include()函数区别说明
2010/03/27 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
php开启安全模式后禁用的函数集合
2011/06/26 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
dojo 之基础篇
2007/03/24 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
使用async await 封装 axios的方法
2018/07/09 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
python将人民币转换大写的脚本代码
2013/02/10 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
Html5新标签解释及用法
2012/02/17 HTML / CSS
初中地理教学反思
2014/01/11 职场文书
大学生军训广播稿
2014/01/24 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
教师演讲稿大全
2014/05/16 职场文书
学校与家长安全责任书
2014/07/23 职场文书
作风大整顿心得体会
2014/09/10 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
文艺演出主持词
2015/07/01 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
如何用H5实现好玩的2048小游戏
2022/07/23 HTML / CSS