使用three.js开发全景漫游 制作单张球形全景

简介
一般网页中使用的全景图为两种,一种是由六张正方形图片组成的,另一种就是一整张的宽高比为2比1的全景图片。前面,第一节的案例就是一个六张正方形。今天我就实现一整张的案例文件引入。

实现思路
一张全景图都是这样的

这是一张three.js官方的全景图片。我们通过这张全景图实现全景查看。
首先我们需要一个球体的网格

var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
1
然后对网格进行x轴反转,使所有的面点向内。

geometry.scale( – 1, 1, 1 );
1
如果不进行这段代码执行的话,那就相当于制作地球了。而我们需要的是从球内去看球,所以,将面的显示朝向都朝向中心。
然后我们将纹理图片加载,生成纹理,供网格使用,并添加到场景中

    var material = new THREE.MeshBasicMaterial( {
        map: new THREE.TextureLoader().load( '2294472375_24a3b8ef46_o.jpg' ) //加载一整张纹理图片
    } );
    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

1
2
3
4
5
最后设置好相机为球的中心点,我们置身于了全景当中了。

如果进行缩小,我们还是能看出来这是一个球

我们现在已经实现最简单的全景图查看了。撒花撒花~~~

案例代码
现在贴出全部代码





Title

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请添加站长微信举报,一经查实,本站将立刻删除。

如若转载,请注明出处:https://www.ibjoo.com/306.html

(0)
上一篇 2020年5月5日 下午3:47
下一篇 2020年5月5日 下午3:48

相关推荐

  • 全景看车怎么做的?

      汽车三维全景展示技术的特点:  1、直接在网络上看多个汽车的全景内饰与汽车外观,方便客户了解更多汽车相关信息,更好对比与筛选;  2、4S店通过三维全景技术真实在线地展示在网络平台上,可以大大提高4S店的知名度;  3、采用单反相机、鱼眼镜头、全景云台、三脚架拍摄,拍摄好的图片,然后用造景师软件合成完美高质量的汽车,真实地展现出汽车内饰,和局部细节,如图…

    VR全景教程 2020年5月5日
    10500
  • 全景图的种类、360度三维实拍全景

      根据全景外在表现形式可以分为柱形全景和球形全景两大类。柱形全景是最简单的全景,就是通常所说的”环视”。在柱形全景中,您可以环水平360度观看四周的景色,但是如果用鼠标上下拖动时,上下的视野将受到限制,上看不到天顶,下看不到地底;球形全景可以达到水平360度,上下180度的效果,在观察球形全景时,观察者位于球的中心,通过鼠标、键盘的…

    VR全景教程 2020年5月5日
    20000
  • 如何使对全景图完美补地?

      1.斜拍补地拍摄方法:  第一步,拍摄水平照片  水平方向上,将云台顺时针转每60°拍摄一张,一共拍摄6张。  第二步,拍摄“真底”  垂直方向,在水平最后一张拍摄处,将相机垂直向上翻转90°,拍摄顶图。再将相机垂直向下翻转90°,  拍摄底图(如图1)。垂直向下拍摄的底图,我们称之为“真底”。  第三步,拍摄“假底”  “真底”拍完之后,将整个机位向后…

    VR全景教程 2020年5月5日
    13100
  • krpano HTML5全景漫游

    目前有个插件叫krpano HTML5 Viewer可以实现全景展示,官网都是英文,而且网上资料也比较少些,需要看看官网实例、文档。 下载地址:http://www.krpano.com/ 引用一下别人的博客:http://my.oschina.net/u/591525/blog/158572 Krpano功能介绍Krpano viewer的主程序所使用的X…

    VR全景教程 2020年5月5日
    14200
  • 装修全景图怎么做?做装修360vr全景图要用哪几个软件?

    满意的装修各有特色,闹心的装修相差无几。装修的烦心事有多少?说起来怕是三天三夜也说不完,还不带重复的。轻则与业主想法需求不符,重则出现安全隐患,危及生命财产安全。面对竞争越来越激烈,越来越透明的装修市场,设计师利用VR全景图把自己的装修设计方案直接呈现给业主无疑是非常有说服力的,能大大提高成单率。那么,装修全景图该怎么做?做装修360vr全景图需要用哪几个软…

    2020年4月23日
    21500

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

工具推荐
公众号
公众号
分享本页
返回顶部
特别提示:欢迎收藏&使用市场工具导航,如您有任何建议或好用工具推荐,请留言告知我们。谢谢~