来源:http://blog.csdn.net/srk19960903/article/details/70214556

使用了点云拼凑出了照片轮播十分有趣,于是用threejs实现这个效果。

首先这件事情分为两步:1.根据图片数据创建对应大小、颜色的点云。2.给点云加上着色器,给渲染管线传递点云变换需要的数据(位置数据,颜色数据)。

今天我们先来实现加载图片并且通过图片数据加载点云:

首先绘制一个200*200的画布,然后将图片绘制到画布上,接下来将图片数据存放到进行存储,等待后面使用。

canvas = document.createElement('canvas');
content = canvas.getContext('2d');
canvas.width = 200;
canvas.height = 200;
document.body.appendChild( canvas );
// container.appendChild( canvas );
img = new Image();
img.src = "bg1.jpg";
canvas.style.position = 'absolute';
img.onload = function () {
content.drawImage(img, 10, 10, canvas.width, canvas.height);
imgDate = content.getImageData(0,0,canvas.width, canvas.height);
createPotCloud(); //创建点云
};

当图片加载完成之后调用创建点云的方法~不然会出现错误。首先根据画布长宽像素,创建相应数量的点对象,positions和colors存放每个点的位置坐标和颜色信息(这里的颜色只有rgb没有a),最后把这些信息加入geometry对象的attribute里面,这里特别要注意的有两点:

1.imgData里面的数据与图片是上下颠倒的需要用canvas.height-i才可以得到正确的图像。

2.图片数据在canvas里面最大值是255而在threejs里面是1所以需要给每个颜色值除以255.0才可以得到正确的颜色,不然全都是白色的。

这样就完成了点云的创建,等有时间在做点云照片的交互~。

function createPotCloud() {     //创建点云
console.log(imgDate);
var particles = canvas.width * canvas.height;
var geometry = new THREE.BufferGeometry(); var positions = new Float32Array( particles * 3 );
var colors = new Float32Array( particles * 3 );
for ( var i = 0; i < positions.length; i ++ ) {
// positions
positions[ 3*i ] = parseInt(i%canvas.width);
positions[ 3*i + 1 ] = 200+ parseInt((canvas.height-i)/canvas.width) ;
positions[ 3*i + 2 ] = 0;
// colors colors[ 3*i ] = imgDate.data[ 4*i ]/255.0;
colors[ 3*i + 1 ] = imgDate.data[ 4*i + 1]/255.0;
colors[ 3*i + 2 ] = imgDate.data[ 4*i + 2]/255.0;
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
// geometry.computeBoundingSphere();
console.log("geometry",geometry);
var material = new THREE.PointsMaterial( { size: 1, vertexColors: THREE.VertexColors } );
var points = new THREE.Points( geometry, material );
scene.add( points ); }

最后让我们看看实现的效果吧:

最后附上github的地址:https://github.com/StringKun/ThreeJSPotCloud

使用threejs点云秀出酷炫的图片效果(一)的更多相关文章

  1. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  2. 赞!15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  3. 使用Three.js网页引擎创建酷炫的3D效果的标签墙

    使用Three.js引擎(这是开源的webgl三维引擎,gitgub)进行一个简单应用. 做一个酷炫的3d效果的标签墙(已经放在我的博客首页,大屏幕可见), 去我的博客首页看看实际效果 www.son ...

  4. 一分钟搞定触手app主页酷炫滑动切换效果

    代码地址如下:http://www.demodashi.com/demo/12826.html 前言: 前几天在看手机直播的时候,自己就用上了触手app.一进到主页就看上了里面页面切换的效果,自己想这 ...

  5. WAIC | 奇点云携「酷炫AI应用」亮相2019世界人工智能大会

    你是否还在疑惑“人工智能可否改变世界?” 那么,你该有一些危机感了. 机器视觉.自然语言处理.智能语音.机器人问诊.智慧驾驶……这些AI技术及应用早已渗入了我们日常生活的点滴. 29日,以「智联世界, ...

  6. 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  7. Flutter 实现酷炫的3D效果

    老孟导读:此文讲解3个酷炫的3D动画效果. 下面是要实现的效果: Flutter 中3D效果是通过 Transform 组件实现的,没有变换效果的实现: class TransformDemo ext ...

  8. CSS动画划入划出酷炫

    HTML插入 <!DOCTYPE html> <html class="no-js iarouse"> <head> <meta char ...

  9. photoshop打造超酷炫火焰人像效果

    效果图看上去非常的酷.制作方法跟火焰字过程差不多.唯一不同的是前期的处理,需要用滤镜把人物轮廓路径找出来,去色后再用制作火焰的过程制作.最后把最好的火焰叠加到人物上面,适当用蒙版控制区域即可.原图 最 ...

随机推荐

  1. KuDu论文解读

    kudu是cloudera在2012开始秘密研发的一款介于hdfs和hbase之间的高速分布式存储数据库.兼具了hbase的实时性.hdfs的高吞吐,以及传统数据库的sql支持.作为一款实时.离线之间 ...

  2. 那些你希望N年前就掌握的命令

    这篇文章转载自黑客志,短短的一篇文章我找到了3个对我非常有用的技巧,在信息爆炸的今天,简直就跟捡宝似的,希望这些命令对你也有帮助. 有人在Reddit上发帖询问:有没有哪条命令是你希望自己在几年前就掌 ...

  3. leetcode342

    public class Solution { public bool IsPowerOfFour(int num) { ) && ((num & (num - )) == ) ...

  4. apache中 MaxClients 与MaxRequestsPerChild

    据现象来对APACHE调优,以前用MAXCLIENTS 3000,砖家建议后,改为1500,今天查资料如下: http://www.linuxqq.net/ MaxClients 要加到多少?连接数理 ...

  5. delphi 泛型 c++builder 泛型

    delphi 泛型 System.Generics.Collections.pas TList<T> http://docwiki.embarcadero.com/Libraries/Be ...

  6. CentOS 7 firewalld

    1.firewalld的基本使用 启动: systemctl start firewalld 查看状态: systemctl status firewalld 停止: systemctl disabl ...

  7. java自定义线程池

    如果并发的线程数量很多,并且每个线程都是执行一个时间很短的任务就结束了,这样频繁创建线程就会大大降低系统的效率,因为频繁创建线程和销毁线程需要时间.那么有没有一种办法使得线程可以复用,就是执行完一个任 ...

  8. 5 python 内置类

    1.实例属性和类属性 给实例绑定属性的方法是通过实例变量,或者通过self变量: class Chinese: def __init__(self,name,sex,age): self.name = ...

  9. 5 Python3 函数进阶&迭代器与生成器

    1.函数进阶 1.1.名称空间 又名name space, 顾名思义就是存放名字的地方,存什么名字呢?举例说明,若变量x=1,1存放于内存中,那名字x存放在哪里呢?名称空间正是存放名字x与1绑定关系的 ...

  10. 脚本中 %~dp0

    cmd窗口中 for /? 查询参数含义 %~dp0, 将参数转换为磁盘路径+名字 例: 脚本中一行 %~dp0abc.exe (abc.exe位置c:\test\abc.exe) 展开后则为 c:\ ...