使用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日
下一篇 2020年5月5日

相关推荐

  • 室内装修设计3d全景效果图怎么做?用什么软件?

    室内设计师“谈单技巧”、“谈单杀手锏”、“签单话术”等等相关文章、视频甚至课程,在百度搜索结果中数不胜数,但实际真正是否有用同时又是别人不知道的呢?在互联网日益渗入生活的今天,如何提高签单率已经不能再单纯依靠所谓的话术了,如何利用好互联网科技才是传统行业致胜的生存之道。3d全景效果图如今成为装修行业设计师们谈单首选的法宝。那么,什么是3d全景效果图?室内装修…

    2020年4月23日
    32900
  • 720度全景怎么制作?

      720度全景实际上就是360全景,就是上下2个360度,其实还是360全景的制作。  360度全景图的制作流程:  全景拍摄硬件:  单反相机 鱼眼镜头 全景云台 三脚架  鱼眼镜头的选择: 根据单反相机的型号来判断适合多少mm的鱼眼镜头。(硬件配置参数表)  拍摄的顺序: 前—右—后—左—上—下 例如: 我使用单反相机尼康D7000配上尼康10.5mm…

    VR全景教程 2020年5月5日
    27100
  • 新手如何入门vr全景拍摄制作?从小白到大师攻略

    2020年开年什么最火?那要数云生活了,云旅游、云看展、云购物、云看房等等…而VR全景技术无疑在云生活中扮演了举足轻重的角色。在2020年的商家,如果没有制作VR全景展示,可能都不太好意思开业哟,VR全景正在主流!那么,新手如何入门vr全景拍摄制作?这里给你从小白到大师攻略,get! 1、你需要做哪些准备? 硬件 拼接制作全景图还是比较占用CPU…

    2020年4月23日
    27300
  • mxreality.js 免费开源的全景图/全景视频/VR 直播播放器介绍

    [2018-10-20 重要更新]支持VR直播功能支持全景视频poster支持全景图和视频和场景之间随意切换全景模式切换回默认主视角播放列表  优点: 1、全景图支持全景模式和VR模式 2、支持网页端全景图补天功能,有效去除顶部和底部拼接留下的痕迹、做出真正完美的产品 3、全景VR图是全景VR视频支持小行星效果,还提供控制效果测试,可以根据自己需要…

    VR全景教程 2020年5月5日
    46400
  • 家装360度全景效果图怎么做的?

    一般360度全景看房都是全景漫游,一个场景切换到另一个场景,比如客厅切换到卧室。 这里的场景也就是一个一个的全景图,可以是实景拍摄拼接的全景图,也可以是渲染的全景图。这里我们不一一介绍了,全景图怎么制作问题可以点击我们网站里面的常见问题去详细了解,下面我们介绍一下全景漫游的制作。 制作一个虚拟漫游包括以下几个步骤: 前期素材准备:准备好制作虚拟漫游需要用到的…

    VR全景教程 2020年5月5日
    34900

发表回复

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

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