使用Pano2VR实现全景图切换和平面图效果

这篇具有很好参考价值的文章主要介绍了使用Pano2VR实现全景图切换和平面图效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

内容简介

        本文在文章《使用Pano2VR实现背景音乐、放大/缩小、旋转、缩略图和直线/立体/鱼眼模式等》基础上,增加全景图切换和平面图效果;效果如下图(为了可以上传缩小屏幕,属于PC端运行):

使用Pano2VR实现全景图切换和平面图效果

实现过程

        1. 运行Pano2VR软件后,打开文章 《使用Pano2VR实现背景音乐、放大/缩小、旋转、缩略图和直线/立体/鱼眼模式等》的vr源文件;

        2. 增加全景图切换热点,如下图,设置属性;

使用Pano2VR实现全景图切换和平面图效果

使用Pano2VR实现全景图切换和平面图效果

        3. 更换热点图标和增加动画效果;

        1)更换图标,先选择“ht_node”下的“hsimage”,然后打开右边“SVG图片”并更换成下载的svg图标;

使用Pano2VR实现全景图切换和平面图效果

        2)增加动画效果:

            21、增加变量timer;

使用Pano2VR实现全景图切换和平面图效果

            22、设置定时器的“计时器”属性;

使用Pano2VR实现全景图切换和平面图效果

            23、设置定时器的“动作”属性;

使用Pano2VR实现全景图切换和平面图效果

            24、设置图标的位置和尺寸;

使用Pano2VR实现全景图切换和平面图效果

使用Pano2VR实现全景图切换和平面图效果

        4. 增加平面图和节点;

        1)增加平面图,根据实际需要设置属性;

使用Pano2VR实现全景图切换和平面图效果

        2)在平面图上添加节点;

            21、添加两个图标(激活和未激活),根据实际需要设置属性;

使用Pano2VR实现全景图切换和平面图效果

            22、两个全景图各添加一个节点,属性设置如下图;

使用Pano2VR实现全景图切换和平面图效果

使用Pano2VR实现全景图切换和平面图效果

 文章来源地址https://www.toymoban.com/news/detail-455821.html

 

 

到了这里,关于使用Pano2VR实现全景图切换和平面图效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何纯前端实现VR查看全景

    首先需要有node环境,安装node,找到对应电脑系统的版本直接安装即可。 打开Gitee地址:https://gitee.com/muxiaogo/threejs-vr-vue3下载本地解压 打开命令行工具cmd,cd到源码解压的根目录执行命令 若安装依赖失败,有可能是node版本不对。本文使用node.v16.4.0 执行成功后会出现node_modul

    2024年02月20日
    浏览(14)
  • three.js实现vr全景图

    方法: 可以利用Threejs中的立方体或者球体实现全景图功能,把立方体或球体当成天空盒子,将无缝衔接的图片贴上,看起来就像在一个场景中,相机一般放置在中央。 three.js中文网 1、立方体实现 立方体6个面要贴上6个方向的图片,这6个图片如下所示: 实现代码如下: 图片

    2024年02月14日
    浏览(38)
  • 微信小程序实现vr全景图预览

    首先在微信小程序管理后台拉到最下面,设置——第三方服务——添加插件输入 wxPano 第二步:在pages.json中添加 然后在你要使用的页面中添加引用例如: 第三步:在页面中使用 在onready中实现渲染 src中放入你拍好的全景图,就能实现预览。

    2024年04月13日
    浏览(4)
  • three.js实现vr全景图(vue)

    方法: 可以利用Threejs中的立方体或者球体实现全景图功能,把立方体或球体当成天空盒子,将无缝衔接的图片贴上,看起来就像在一个场景中,相机一般放置在中央。 three.js中文网 1、立方体实现 立方体6个面要贴上6个方向的图片,这6个图片如下所示: 实现代码如下: 图片

    2024年02月12日
    浏览(17)
  • 基于vue3.0实现vr全景编辑器

    随着社会的不断发现,现实生活中有很多时候会使用到全景现实,比如房地产行业vr看房,汽车行业vr看车之类的,全景可视化真实还原了现场的场景,真正做到沉浸式体验。 现在我们基于vue3.0版本开发出了一款沉浸式的编辑器,只需要使用全景相机在现场拍摄全景场景,然

    2024年02月15日
    浏览(12)
  • vue2+three.js实现类似VR、3D全景效果

    效果图: 俩图标是我自己加的前进后退按钮,也是百度了好久,再加上GPT的帮助,才给搞出来。因为需求急,都不看官方文档,百度到一个能跑的demo之后改吧改吧,就先用着了。 下面是代码: 这里 代码有很多用不到的地方和需要优化的地方,我是来不及改了,就先这样吧

    2024年02月15日
    浏览(16)
  • VR全景医疗:多渠道矩阵式使用,展现医疗实力

    VR全景医疗的市场正在趋于成熟,医院将VR全景展示作为一种新颖的展示方式,在全景中嵌入官网,展现医院全貌,更可以凭借多渠道矩阵式使用,展现医疗实力,提高医院知名度。虽然这是一个全新的领域,但是VR医疗对我们的生活以及医院的工作都起到了巨大的作用。 首先

    2024年02月15日
    浏览(13)
  • 上海VR全景展示,快速了解VR全景拍摄

    导语: 随着科技的不断进步,虚拟现实技术的应用日益广泛。在这其中,VR全景图片作为一种数字化助力的全景拍摄方式,正逐渐成为人们关注的焦点。通过数字化技术,VR全景图片能够以360度全方位的视角呈现真实的场景,为观众带来身临其境的感受。本文将重点探讨VR全景

    2024年02月15日
    浏览(15)
  • 0基础学习VR全景平台篇 第78篇:全景相机-拍摄VR全景

    新手入门 圆周率科技,成立于2012年,是中国最早投身嵌入式全景算法研发的团队之一,亦是全球市场占有率最大的全景算法供应商。相继推出一体化智能屏、支持一键高清全景直播的智慧全景相机--Pilot Era和Pilot One,为用户带来实时畅享8K的高清沉浸式直播体验。 这里以Pi

    2024年02月14日
    浏览(12)
  • VR全景的价值体现在哪里?VR全景创业有市场吗?

    在这个5G时代,思维一定要快,动作还得要帅,动作快的现在已经挣到钱了。VR全景行业赶上了风口,在5G的搭载下发展非常迅速。 随着时代的发展,各行各业百花齐放,而创业的门槛也越来越低,作为创业项目来说,VR全景创业的投资还是比较小的,一人一套设备就可以简单

    2024年02月10日
    浏览(12)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包