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 相关文章推荐
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
js+canvas实现纸牌游戏
Mar 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实现的MySQL数据浏览器
2007/03/11 PHP
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
python转换摩斯密码示例
2014/02/16 Python
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
Python2与Python3的区别实例总结
2019/04/17 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
工程现场管理求职自荐信
2013/10/02 职场文书
平面设计师工作职责范文
2013/12/03 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
优秀企业获奖感言
2014/02/01 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
初中重阳节活动总结
2015/05/05 职场文书
海底两万里读书笔记
2015/06/26 职场文书
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js
Vue操作Storage本地化存储
2022/04/29 Vue.js