创新互联百度小程序教程：panoviewerVR全景图-beta

  • panoviewer VR 全景图 -beta
    • 使用方法
      • 1. 在项目中引用动态库
      • 2. 在使用到组件的页面配置动态库
      • 3. 编写*.swan文件
    • 动态库属性列表
      • 关键配置项说明
    • 投影模式

    panoviewer VR 全景图 -beta

    panoviewer 动态库提供了在小程序中播放全景图的方法，底层基于百度 webVR SDK Hydreigon 实现。

    创新互联长期为近1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为翠屏企业提供专业的网站建设、成都做网站，翠屏网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。

    使用方法

    1. 在项目中引用动态库

    使用动态库的方法参见使用动态库，在app.json中增添一项 dynamicLib，与pages同级。

    • JSON
     
 
 
      
  
  
  
    1. "dynamicLib": {
      2.   
  
  
    2.  "myDynamicLib": {
      3.   
  
  
    3.  "provider": "panoviewer"
      4.   
  
  
    4.  }
      5.   
  
  
    5. },
      6.

    2. 在使用到组件的页面配置动态库

    在每个使用到图表组件的页面，配置*.json文件如：

    • JSON
     
 
 
      
  
  
  
    1. {
      2.   
  
  
    2.  "usingSwanComponents": {
      3.   
  
  
    3.  "panoviewer": "dynamicLib://myDynamicLib/panoviewer"
      4.   
  
  
    4.  }
      5.   
  
  
    5. }
      6.

    3. 编写*.swan文件

    • SWAN
     
 
 
      
  
  
  
      2.

    这是一种最基本的配置方式。style也可以在*.css中声明，需要保证是有宽度和高度的。options在*.js中绑定到页面的 data 中：

    • JS
     
 
 
      
  
  
  
    1. const options = ...;
      2.   
  
  
      3.   
  
  
    3. Page({
      4.   
  
  
    4.  data: {
      5.   
  
  
    5.  options: options
      6.   
  
  
    6.  }
      7.   
  
  
    7. });
      8.

    其中，options 是配置项，定义了全景图的物料资源地址和渲染交互配置，一个典型的配置如下所示：

    • JS
     
 
 
      
  
  
  
    1. options = {
      2.   
  
  
    2.  "image": "https://xxx.com/.../xxx.jpg",
      3.   
  
  
    3.  "smallPlanet": 3000,
      4.   
  
  
    4.  "config": {
      5.   
  
  
    5.  "projectionType": "equirectangular"
      6.   
  
  
    6.  }
      7.   
  
  
    7. };
      8.

    动态库属性列表

    上支持的属性包括：

    属性名称 类型 说明
    options Object 配置项

    关键配置项说明

    配置项名称 类型 说明
    image Object/String 投影模式对应的资源配置
    projectionType String 投影模式名称
    smallPlanet Number 小行星动画时长，如果未设置则表示无动画

    投影模式

    动态库支持多种投影模式，包括球形、立方体、EAC、手机全景、分级分块，投影模式对应的名称如下表：

    投影模式 名称
    球形 equirectangular
    立方体 cubemap
    EAC cubestrip
    手机全景 panorama
    分级分块 multires

    除分级分块模式外，其他模式的 image 字段为资源 url ，分级分块模式的 image 参数是切片脚本生成的配置，说明如下：

    配置项名称 类型 说明
    basePath String 分块图的根目录
    path String 分块图的格式化方式
    fallbackPath String 缩略图路径
    extension String 图像格式
    tileResolution String 分块 size
    maxLevel Number 最大级别
    cubeResolution Number 立方体单面 size

    示例配置如下

    • JS
     
 
 
      
  
  
  
    1. {
      2.   
  
  
    2.  image: {
      3.   
  
  
    3.  basePath:
      4.   
  
  
    4.  "https://hydreigon-publish.cdn.bcebos.com/swan-hydreigon/pano/lujiazui-4k/",
      5.   
  
  
    5.  path: "/%l/%s%y_%x",
      6.   
  
  
    6.  fallbackPath: "/fallback/%s",
      7.   
  
  
    7.  extension: "jpg",
      8.   
  
  
    8.  tileResolution: 512,
      9.   
  
  
    9.  maxLevel: 3,
      10.   
  
  
    10.  cubeResolution: 1304
      11.   
  
  
    11.  },
      12.   
  
  
    12.  config: {
      13.   
  
  
    13.  projectionType: "multires"
      14.   
  
  
    14.  }
      15.   
  
  
    15. }
      16.

    标题名称：创新互联百度小程序教程：panoviewerVR全景图-beta
    分享路径：http://www.mswzjz.cn/qtweb/news24/255774.html

    攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

    贝锐智能技术为您推荐以下文章

    网站改版知识

    各行业网站

    成都网站排名　　 　成都服务器托管　　 　成都网站运营维护　　 　联通机柜租用　　 　南充服务器托管　　 　温江服务器托管　　 　亚克力背部发光字　　 　广安搬家公司　　 　瑞杰企业管理　　 　网络口碑营销　　 　成都网站设计　　 　成都定制网站开发　　 　营销型网站　　 　成都网站建设　　 　工业净化空调　　 　西部信息服务器托管　　 　手机网站建设公司　　 　led无边发光字　　 　成都网站设计　　 　微博营销