首页 VR全景教程 使用three.js开发全景漫游 制作单张球形全景

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

简介一般网页中使用的全景图为两种,一种是由六张正方形图片组成的,另一种就是一整张的宽高比为2比1的全景图片。前面,第一节…

简介
一般网页中使用的全景图为两种,一种是由六张正方形图片组成的,另一种就是一整张的宽高比为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

免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。

作者: TOB市场人

为您推荐

mxreality.js 免费开源的全景图/全景视频/VR 直播播放器介绍

mxreality.js 免费开源的全景图/全景视频/VR 直播播放器介绍

[2018-10-20 重要更新]支持VR直播功能支持全景视频poster支持全景图和视频和场景之间随意切换全景模式切换...
技术分享:全景视频技术的实现

技术分享:全景视频技术的实现

全景视频技术的实现      全景视频在VR领域是一个非常热...
浏览器中实现3D全景浏览

浏览器中实现3D全景浏览

如果你用过网页版的百度地图,你大概3D全景图浏览是一种怎样的酷炫体验:在一个点可以360度环顾周围的建筑、景色,当然也可...
全景图的种类、360度三维实拍全景

全景图的种类、360度三维实拍全景

  根据全景外在表现形式可以分为柱形全景和球形全景两大类。柱形全景是最简单的全景,就是通常所说的”环视...
全景拍摄教程:为什么要使用全景云台?

全景拍摄教程:为什么要使用全景云台?

  在我们日常拍摄全景图片的时候,一定都会用到一个设备:全景云台。那么有小伙伴就问了:为什么要使用全景云台?全景云台在全...

发表回复

您的电子邮箱地址不会被公开。

返回顶部