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现实多行信息
Aug 26 Javascript
番茄的表单验证类代码修改版
Jul 18 Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
js函数柯里化的方法和作用实例分析
Apr 11 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
oracle资料库函式库
2006/10/09 PHP
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
56.com视频采集接口程序(PHP)
2007/09/22 PHP
关于php连接mssql:pdo odbc sql server
2011/07/20 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
jquery封装的对话框简单实现
2013/07/21 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
2015/03/20 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
js实现自定义路由
2017/02/04 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
VUE实现图片验证码功能
2020/11/18 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
利用python修改json文件的value方法
2018/12/31 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
班主任新年寄语
2014/04/04 职场文书
文明生主要事迹
2014/05/25 职场文书
关于环保的活动方案
2014/08/25 职场文书
代理人委托书
2014/09/16 职场文书
学校百日安全活动总结
2015/05/07 职场文书
公司仓库管理制度
2015/08/04 职场文书
初中思品教学反思
2016/02/20 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang