pannellum插件多分辨率多场景转换自动加载

最新推荐文章于 2024-09-13 22:15:25 发布

threeMonth@

最新推荐文章于 2024-09-13 22:15:25 发布

阅读量2k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Yipitre/article/details/121425392

版权

本文介绍了如何利用vue-pannellum组件和Pannellum插件创建多分辨率的全景图。通过Python转换JSON文件以适应不同分辨率，并在Vue.js应用中创建全景图模块，设置type为'multires'。当涉及多场景时，自动加载(autoLoad)不起作用，但可以通过调用this.viewer.loadScene()手动加载场景。对于单场景，直接在JSON的url中设置'multires'参数即可实现自动加载。

摘要由CSDN通过智能技术生成

简单功能可以使用vue的插件
vue-pannellum组件
https://github.com/jarvisniu/vue-pannellum
pannellum插件
https://pannellum.org/
下载pannellum，多分辨的json文件使用python转换
创建全景图模块，使用type: “multires”,设置为多分辨率，通过python生成的json文件来将数据设置在场景中，实现多场景的多分辨率全景图
多场景时，设置autoLoad不生效，无法自动加载，可以使用this.viewer.loadScene(‘circle’)来实现进去后场景自动加载，若是单场景，不需要切换场景，可以直接使用json的url设置将"type": "multires"设置后，"multiRes"设置为对应的url即可

//在template内
<template>
  <div id="panorama" :style="height">
    <div class="list">
      <div :class="num==0?'btn2':'btn1'" @click="scene1Change1">按钮1</div>
      <div :class="num==1?'btn2':'btn1'" @click="scene1Change2">按钮2</div>
      <div :class="num==2?'btn2':'btn1'" @click="scene1Change3">按钮