three.js 将图片马赛克化
时间:2022-07-24
本文章向大家介绍three.js 将图片马赛克化,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
这篇郭先生来说说BufferGeometry,类型化数组和粒子系统的使用,并且让图片有马赛克效果(同理可以让不清晰的图片清晰化),如图所示。在线案例点击图片马赛克。
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属性上,就可以了,也可以每隔两行、两列取一个点,但是图片上面的点是一维的,所以需要一些数学方法,
如图所示,原理很简单哦。将不清晰的图片清晰化,就是需要插入更多的像素点,插入的像素点,需要根据已存在的像素点的颜色进行插值,比如原图的像素点1为0xffffff,像素点2的颜色为0xdddddd,则插在两个像素点之间像素点的颜色为0xeeeeee,以此类推。
转载请注明地址:郭先生的博客
- 概率论09 期望
- Javascript中数组的sort()和reverse()方法
- CentOS6.5开放端口,配置防火墙
- JavaWeb(一)Servlet中乱码解决与转发和重定向的区别
- Java魔法堂:四种引用类型、ReferenceQueue和WeakHashMap
- Javascript中数组的使用
- JavaWeb(一)Servlet中的request与response
- 数据库18456错误怎么解决
- JavaWeb(一)Servlet中的ServletConfig与ServletContext
- 语义化HTML:p、h1-6、q、blockquote、hr、address、code、pre、var、cite、dfn和samp
- Win7系统 IIS 调试ASP(aspcmsgbk25) 错误号:3706 提示 “未找到提供程序 该程序可能未正确安装”解决办法
- 普通文件和数据库存储的对比
- JavaWeb(一)之细说Servlet
- jQuery Tools Scrollable使用的限制
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- R语言分析负利率下金融市场:负利率和年金价值的变化
- python字典-增、删、改
- C# dotnet 使用判断文件夹存在的方法判断一个文件路径会怎样
- 怎样给wordpress网站模板,添加最新文章、随机文章、热评文章?
- [医疗信息化][DICOM教程]1.使用Java的DICOM基础-理解DICOM文件-DICOM Basics using Java - Making Sense of the DICOM File
- python自动播放网课
- Istio实战——流量管理
- WordPress移除head头部js、css、feed等多余加载项
- python控制鼠标键盘,解放你的双手~
- 用腾讯云批量计算(batch-compute)调度GPU分布式机器学习
- R语言模拟保险模型中分类器的ROC曲线不良表现
- Linux xargs grep zgrep命令
- r语言空间可视化绘制道路交通安全事故地图
- 小知识:Oracle RAC添加服务名实现单节点访问
- Python去掉图片四周纯色边框