THREE.JS入门教程(6)创建自己的全景图实现步骤
字体：[ ] 类型：转载 时间：
Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D,全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难,感兴趣的朋友可以了解下啊，希望本文对你有所帮助
译序 Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。 0.简介 全景图非常酷。使用Three.js做一个属于自己的全景图并不是那么困难。 要做一个全景图，你需要一个软件用来做一张全景图片（译者注：如果你没有那些特殊的设备）。我使用了iPhone上的Microsoft Photosynth软件来制作。 1.环境纹理 首先什么是环境纹理？在WebGL或者OpenGL中他们实际上是种特殊的立方体纹理。一个立方体纹理是对整个场景（虚拟的或现实的）的观察，场景的样子被“贴”在了立方体的内部表面。想象一下，你站在山顶，向前看，向左看，向右看，向上看，向下看，最后向后看。每一次你都看到了这个“立方体”的内部表面，你就站在这个立方体的中心。如果这个立方体足够大，就很难分辨出立方体的棱和角，而给你一种错觉：你处在一个很大的环境里面。如果你还没弄明白，那么维基百科上的cube maps条目会非常有帮助。 这很酷，但是这怎么用？我们可以像做反射和折射一样，而且事实上这两者的函数都已经内建在GLSL，WebGL的着色器语言上了。你只需要传递给着色器6张纹理图片，每张代表立方体的一个内表面，然后告诉WebGL这是个立方体纹理，然后就可以使用上面的效果了。 半轴：这个术语服务于立方体纹理。因为我们通常使用三个轴来描述三维空间：x轴、y轴、z轴，所以用于立方体纹理的图片也用轴的名称来标识了。一共六张图片，每个轴两张图片，正半轴一个，负半轴一个。 2.创建全景图片 创建全景图片的第一步就是走出户外，使用手机上的应用来照一张。我在伦敦的金融区转了一圈，然后在Gherkin照了一张。我获得了下面这张图片： &值得指出的是，这个应用将图片做成了贴到球体上的那种。这看上去不错，但是我们现在需要将它贴到一个立方体的内表面上，所以还要处理一下这张图。 3.转化到立方体上 这部分我简短介绍一下。我把刚才获得的那张照片载入到一个3D建模软件中，比如Maya或者Blender，然后将其粘贴到一个球体的内表面上。然后我创建了6个正射投影的相机，每一个都对应于一个半轴。最后我将这6个相机捕捉到的图像保存了下来。具体怎么完成比较复杂，也没必要在这里讲解，所以我写了一个Blender脚本文件，所有的一切都设置好了。 使用这个脚本文件你只需要： 1.将你自己的全景图重命名为 environment.jpg； 2.将全景图和Blender脚本文件放在同一个文件夹下； 3.载入脚本文件； 4.点击右侧的 Animation 按钮； 5.等一会儿，6张图像已经创建好了。 很Cool吧？现在你可以重新命名这些图像，使之与每一个半轴相匹配。比如这样： &#.png → pos-z.png &#.png → neg-x.png &#.png → neg-z.png &#.png → pos-x.png &#.png → neg-y.png &#.png → pos-y.png 4.加入场景 现在我们已经获得了环境纹理，然后将其载入到场景中。Three.js使这变得非常简单：
代码如下: // 纹理图像的url var urls = [ 'path/to/pos-x.png', 'path/to/neg-x.png', 'path/to/pos-y.png', 'path/to/neg-y.png', 'path/to/pos-z.png', 'path/to/neg-z.png' ], // 打包成我们需要的对象 cubemap = THREE.ImageUtils. loadTextureCube(urls); // 设置格式为RGB cubemap.format = THREE.RGBF
现在只需要将cubemap指定到一个材质中去就可以了！
代码如下: var material = new THREE .MeshLambertMaterial({ color: 0xffffff, envMap: cubemap });
5.小结 就这样了，实现一个全景图很酷，尤其是你可以将你自己的地方制作为WebGL全景图。和往常一样，我打包了这次教程的源码
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具基于Three.js的真实三维地形可视化设计与实现--《测绘与空间地理信息》2015年10期
基于Three.js的真实三维地形可视化设计与实现
【摘要】：HTML5的出现以及Web GL技术的推广,为三维Web GIS提供了新的解决方案。针对强调具有真实感三维地形的构建与实现,对Web GL第三方类库Three.js引擎进行了研究,提出了基于瓦片、DEM数据的三维地形构建方法,并充分发挥Web GL开放性、免插件、跨平台、硬件加速的优势,创建了基于浏览器的三维地形交互系统,实验验证了该方法的可行性与有效性。
【作者单位】：
【关键词】：
【基金】：
【分类号】：P208【正文快照】：
0引言近年来,计算机与互联网技术发展迅猛,Web3D技术在此期间快速发展,并趋于成熟,在各领域都得到了广泛的应用。在Web GIS领域,针对客户端三维实现采用的Web3D技术主要有VRML,Flash,Silverlight,Java Applet,Active X,X3D等。用户在对系统访问时需要安装几十K到几兆的具有很
欢迎：、、)
支持CAJ、PDF文件格式，仅支持PDF格式
【参考文献】
中国期刊全文数据库
许虎;聂云峰;舒坚;;[J];地球信息科学学报;2010年04期
刘爱华;韩勇;张小垒;陈戈;;[J];地理空间信息;2012年05期
【共引文献】
中国期刊全文数据库
郭宽伟;岑国平;马文轩;李强;;[J];四川建筑科学研究;2012年01期
高英杰;潘剑君;刘世峰;;[J];安徽农业科学;2009年02期
魏巍;蔡栋;;[J];安徽农业科学;2009年16期
张训虎;朱辉;陈秋伟;;[J];北京测绘;2012年03期
张婷;王春;李建利;吴良超;;[J];测绘标准化;2004年04期
钟斌;白玉;;[J];测绘标准化;2005年03期
李少龙;;[J];测绘标准化;2005年03期
舒娱琴,彭国均,池天河,唐丽玉;[J];测绘工程;2003年03期
查正军;鲍峰;欧建良;;[J];测绘工程;2006年06期
刘春霞;王家海;;[J];测绘工程;2008年03期
【二级参考文献】
中国期刊全文数据库
郑建功;张转;刘扬;滕大强;郭庆堂;;[J];测绘科学;2009年05期
方利;钟耳顺;姚敏;;[J];地球信息科学;2008年03期
汪晓华;;[J];福建电脑;2010年03期
王浩;喻占武;曾武;潘少明;;[J];武汉大学学报(信息科学版);2009年06期
杨建,黄正军,唐山;[J];微机发展;2004年10期
潘志庚,马小虎,石教英;[J];中国图象图形学报;1998年09期
【相似文献】
中国期刊全文数据库
陈长林;魏海平;张松;王峰;;[J];测绘科学;2009年01期
徐世浙,赵生凯;[J];桂林冶金地质学院学报;1985年02期
,寸树苍;[J];成都地质学院学报;1986年03期
靳海亮,高井祥,康建荣;[J];微计算机信息;2005年14期
陈斌,董士海,方裕;[J];地理与地理信息科学;2005年02期
李汇军,孔玉寿,阮鲲,王昌雨,周华任,李建新;[J];解放军理工大学学报(自然科学版);2001年06期
彭光雷;郭茂耘;柴毅;;[J];重庆大学学报(自然科学版);2006年04期
桑建国;[J];应用气象学报;1997年S1期
邓春成,刘先林,叶泽田;[J];测绘科学;2003年02期
初苗;田少辉;;[J];科技信息;2009年06期
中国重要会议论文全文数据库
张波;张国锋;;[A];'2006系统仿真技术及其应用学术交流会论文集[C];2006年
陈长林;魏海平;王峰;康杰;;[A];中国地理信息系统协会第四次会员代表大会暨第十一届年会论文集[C];2007年
张秀程;李红军;;[A];计算机技术与应用进展·2007——全国第18届计算机技术与应用（CACIS）学术会议论文集[C];2007年
杨玉梅;高炳浩;展洪涛;;[A];吉林省测绘学会2008年学术年会论文集（上）[C];2008年
庄卫东;汪春;王熙;;[A];中国农业工程学会2011年学术年会论文集[C];2011年
解向利;皮亦鸣;;[A];第二届全国信息与电子工程学术交流会暨第十三届四川省电子学会曙光分会学术年会论文集[C];2006年
魏东;张秀程;;[A];全国首届数字（虚拟）科技馆技术与应用学术研讨会论文集[C];2007年
杨新文;阮爱华;;[A];首届长三角科技论坛数字区域建设与地理空间技术论坛优秀论文集[C];2004年
张永库;孙宁;;[A];'2006系统仿真技术及其应用学术交流会论文集[C];2006年
陈惠荣;魏涛;姜林君;王莉莉;;[A];第二十一届海洋测绘综合性学术研讨会论文集[C];2009年
中国重要报纸全文数据库
辛海强;[N];中国测绘报;2007年
铁道第三勘察设计院
于炀　吴耀良;[N];计算机世界;2010年
王旭　马新云;[N];解放军报;2010年
耿诺;[N];北京日报;2012年
中国博士学位论文全文数据库
喻春阳;[D];东北大学;2011年
郭浩然;[D];解放军信息工程大学;2013年
中国硕士学位论文全文数据库
张秀程;[D];沈阳工业大学;2007年
辛玉龙;[D];哈尔滨工程大学;2012年
郭垒;[D];解放军信息工程大学;2012年
胡其;[D];浙江工业大学;2009年
孙范荣;[D];沈阳工业大学;2005年
彭光雷;[D];重庆大学;2005年
边前卫;[D];沈阳工业大学;2006年
王睿;[D];沈阳工业大学;2006年
李义;[D];电子科技大学;2012年
于芹芬;[D];浙江工业大学;2007年
&快捷付款方式
&订购知网充值卡
400-819-9993
《中国学术期刊（光盘版）》电子杂志社有限公司
同方知网数字出版技术股份有限公司
地址：北京清华大学 84-48信箱 大众知识服务
出版物经营许可证 新出发京批字第直0595号
订购热线：400-819-82499
服务热线：010--
在线咨询：
传真：010-
京公网安备75号下次自动登录
现在的位置:
& 综合 & 正文
如何学习Three.JS 3D引擎
学习ThreeJS
我已经用Three.js做了些小实验，这是一个比较伟大的引擎，你只需要为浏览器的不支持而头疼。你可以用它来创建摄像机(cameras)，对象,(objects), 光照(lights), 材质(materials) 等等。你还可以选择渲染器，Three.js提供了多种渲染方式，如果你想让你的网页支持HTML5你也可以选择使用canvas来渲染，也可以使用WebGL或者SVG来进行渲染。Threejs是开源框架，你如果感兴趣你也可以参与开发。但是现在我只是用这个引擎，也只是把它当作一种小工具。在这里我也给大家演示一下如何学习ThreeJS的基础知识。
对于ThreeJS的粉丝这是一片很基础的，但是对于新手这将很快的使你了解ThreeJS，通常你需要结合大量的实例来分析demo才可以明白。如果你有问题可以直接在mrdoob的论坛上发布， .他会给你做出回答和解决的。如果你有很深奥和着急的问题你也可以发邮件给他们 和 都会帮组你的。
首先我假设你是个有一定基础的3D开发者，并且你可以熟练的掌握和合理的运用javascript语法。如果你没有上述两点那么你需要学习学习，也许你会觉得非常的有趣的。不过javascript确实有点混乱，容易被人头疼。
在我们目前的3D世界当中至少包括以下几点基础的东西，我会给大家一一介绍。
一： 一个场景
二： 一个渲染器
三： 一个摄像机
四： 一个对象或者至少两个材质
当然你也可以做很多的东西，很多非常疯狂的东西，只要很有足够的想象力，那么就开始你的3D开发，做出很多很炫的WebGL作品吧。
开发WebGL需要浏览器的大力支持，google的chrome是我在做demo的时候常用的浏览器，个人感觉还是不错的。支持webgl的渲染并且在javascript上速度还是不错的还有一些潜在的javascript引擎。Chrome全部支持canvas，webgl，svg这一块。火狐个人觉得排名第二那么google就肯定第一了，并且是火狐4的版本。火狐的javascript引擎似乎还是比google的chrome慢些，但是在渲染的支持上还是很强的。Opear和Safari也支持webgl，但是他们当前的版本只支持canvas渲染，IE9也只支持canvas渲染，到目前为止还没有听到微软说全面支持webgl的消息，担忧啊。
3：设置场景（Scene）
这一步我想你肯定已经选好了一个可以渲染WebGL的浏览器了，并且选好了你要使用的渲染方式了canvas，因为canvas还是比较标准些。Canvas不只是支持WebGL，还有更多的支持。不过，WebGL运行在你cpu的图形卡上，这样就意味着你的cpu可以专心的做别的事，而不需要为webgl渲染而担心，这就叫做硬件加速渲染。
无论你选择什么样的渲染机制，但是你需要记住的就是javascript需要很好的优化性能，因为3D对于浏览器来说还是很大的渲染，所以在你的javascript中尽量减少浏览器的压力，优化优化再优化你的javascript代码。
那么这样的话，你可以下载ThreeJS的多有js文件在你的电脑中，那么先看看如何着手建立一个Threejs的场景，看下面代码行：
// set the scene sizevar WIDTH = 400,
HEIGHT = 300;
// 设置相机的属性svar VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// 得到dom的元素// - 假设我们有jquery的开发经验var $container = $('#container');
// 创建一个WebGL的渲染器和摄像机和一个场景
var renderer = new THREE.WebGLRenderer();var camera = new THREE.Camera(
VIEW_ANGLE,
);var scene = new THREE.Scene();
// 摄像机从 0,0,0开始 ，因此默认原点，需要时回滚
//设置摄像机z坐标位置距离原点向外300camera.position.z = 300;
// 开始渲染renderer.setSize(WIDTH, HEIGHT);
// 加载dom的元素$container.append(renderer.domElement);
看起来挺简单的，不是很难。
4：做一个网格模型
现在我们有一个场景，一个摄像机，一个渲染器，但是我们需要画一个实体。实际上Three.js可以加载很多格式的3D文件，你的模型文件可以来自Blender，Maya，Chinema4D，3DMax等等。现在我们要做的是一个网格的元素，相对比较基础的东西(球体)Spheres,
(飞机)Planes,(体)
Cubes ， (圆柱体)Cylinders。Three.js创建这些物体会非常的容易。
//定义球体var radius = 50, segments = 16, rings = 16;
// 创建一个新的网格球体几何学 -// 在下一节我们将要涉及到sphereMaterial var sphere = new THREE.Mesh(
new Sphere(radius, segments, rings),
sphereMaterial);
// 添加球体到场景scene.addChild(sphere);
好了！但是我们的这个球体没有材质。在代码中我们使用了一个变量sphereMaterial，但是我们还没有对他进行定义。首先我们需要做的是对球体的材质进行描述。
5：材质（Materials）
毫无疑问这在Three.Js中是很重要的一部分，因为Three.js可以让你很方便的实现你的网格效果。
还有很多很多，现在我只介绍这些，剩下的由你自己去发现。但是你必须写在WebGL的着色器上，着色器是一个很庞大的东西，但是你可以使用GLSL(OpenGL的着色语言)。这就需要你用数学来实现模拟的灯光，这样会很复杂。但是多亏了Three.js，你可以不需要在做那样的数学计算了，如果你想写关于阴影的那么你可以使用MeshShaderMaterial来实现，所以这是一个很活泛的设置。
// 创建一个球体的材质var sphereMaterial = new THREE.MeshLambertMaterial({
color: 0xCC0000});
你也可以创建一个其他的材质，除了颜色，比如平滑或者环境的地图。你可以看看这个页面，看看你还可以创建什么材质，实际上任何一个引擎都会提供给你的。
6：灯(Lights)
如果你按照上面的实现，那么你现在可以看到一个空色的圆球。但是我们现在有材质却没有光，Three.js默认的是全环境的光，那么我们需要把这些光修理的好点。
// 创建一个光的源点var pointLight = new THREE.PointLight( 0xFFFFFF );
// 设置光源点位置pointLight.position.x = 10;pointLight.position.y = 50;pointLight.position.z = 130;
// 添加到场景scene.addLight(pointLight);
7：循环渲染
现在我们大概算是有一些渲染了，但是我们需要这样做：
// 绘画!renderer.render(scene, camera);
我们渲染但不一定只是一次，所以如果你想循环渲染，那么你就需要好好的利用requestAnimationFrame这个js类，这是在浏览器中处理动画迄今为止最先进的js代码，但是到目前为止还不是完全支持，所以推介你看看 .。
// 设置回滚时间
window.requestAnimFrame = (function(){
window.requestAnimationFrame
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame
window.oRequestAnimationFrame
window.msRequestAnimationFrame
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
// 插入setInterval(render, 16) ....
(function animloop(){
requestAnimFrame(animloop, element);
// requestAnim shim layer by Paul Irish
window.requestAnimFrame = (function(){
window.requestAnimationFrame
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame
window.oRequestAnimationFrame
window.msRequestAnimationFrame
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
// example code from mr doob : /lab/javascript/requestanimationframe/
var canvas, context;
animate();
function init() {
canvas = document.createElement( 'canvas' );
canvas.width = 256;
canvas.height = 256;
context = canvas.getContext( '2d' );
document.body.appendChild( canvas );
function animate() {
requestAnimFrame( animate );
function draw() {
var time = new Date().getTime() * 0.002;
var x = Math.sin( time ) * 96 + 128;
var y = Math.cos( time * 0.9 ) * 96 + 128;
context.fillStyle = 'rgb(245,245,245)';
context.fillRect( 0, 0, 255, 255 );
context.fillStyle = 'rgb(255,0,0)';
context.beginPath();
context.arc( x, y, 10, 0, Math.PI * 2, true );
context.closePath();
context.fill();
8常见的对象的特性
如果你花时间看代码的话，你会看到很多Three.js继承的Object3D的对象，这是一个很基础的对象，包含很多非常有用的特征，位置，旋转，大小的信息。特别的是我们的网格也是继承与Object3D，他加了自己的一些特性：材质和几何。
你想知道为什么我会说到这里，那么你想画一个球体在你的web上什么都不做吗？这些特征的存在值得你去研究，因为他们允许你去操作潜在的材质和网格划分。
// 几何球面sphere.geometry
// 包含顶点和面sphere.geometry.vertices // 数组sphere.geometry.faces // 以数组形式// 位置sphere.position // 包括x，y，z三个属性sphere.rotation // 包括x，y，z三个属性sphere.scale // 包括x，y，z三个属性
9：一个小的更改
在顶点这里我们需要做个更改，你尝试更改你的顶点数据，但是你会发现你的渲染一点没有改变，这是为什么呢?因为Three.js是一向很复杂的优化，你只需要更换其中的一个方法就可以，
// 改变顶点sphere.geometry.__dirtyVertices =
// 改变法线sphere.geometry.__dirtyNormals =
其实还有很多，但是这两个是我发现最重要的，你会发现只改变这个就省去很多不必要的计算。
我想你已经大致了解这个关于Three.js的简单介绍了，你可以自己动手尝试做些实例了，你会发现3D在网页中也是非常有趣的。Three.js为你解决了很多头疼的问题，你就可以做出很酷的效果了。
你可以看看这里 的文章，对你会有很大的帮组的，
&&&&推荐文章:
【上篇】【下篇】}