创新互联百度小程序教程：spintileviewerVR3D环物-beta

  • spintileviewer VR 3D 环物 -beta
    • 使用方法
      • 1. 在项目中引用动态库
      • 2. 在使用到组件的页面配置动态库
      • 3. 编写*.swan文件
    • 动态库属性列表
      • 关键配置项说明

    spintileviewer VR 3D 环物 -beta

    spintileviewer 动态库提供了在小程序中播放 3D 环物的方法，底层基于百度 webVR SDK Hydreigon 实现。

    会泽网站制作公司哪家好，找成都创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。成都创新互联公司2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联。

    使用方法

    1. 在项目中引用动态库

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

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

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

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

    • JSON
     
 
 
      
  
  
  
    1. {
      2. 
  
  
  
    2.  "usingSwanComponents": {
      3. 
  
  
  
    3.  "spintileviewer": "dynamicLib://myDynamicLib/spintileviewer"
      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 是配置项，定义了 3D 环物的物料资源地址和渲染交互配置，一个典型的配置如下所示：

    • JS
     
 
 
      
  
  
  
    1. options = {
      2. 
  
  
  
    2.  "spin": {
      3. 
  
  
  
    3.  "thumb": "https://xxx.com/.../thumb.jpg",
      4. 
  
  
  
    4.  "crossLongitude": false,
      5. 
  
  
  
    5.  "reversalY": true,
      6. 
  
  
  
    6.  "reversalX": true,
      7. 
  
  
  
    7.  "initColRow": [
      8. 
  
  
  
    8.  0,
      9. 
  
  
  
    9.  0
      10. 
  
  
  
    10.  ],
      11. 
  
  
  
    11.  "rowCount": 1,
      12. 
  
  
  
    12.  "colCount": 30,
      13. 
  
  
  
    13.  "imageUrl": [
      14. 
  
  
  
    14.  [
      15. 
  
  
  
    15.  "https://xxx.com/.../00.jpg"
      16. 
  
  
  
    16.  ]
      17. 
  
  
  
    17.  ],
      18. 
  
  
  
    18.  "scaleType": "inside"
      19. 
  
  
  
    19.  },
      20. 
  
  
  
    20.  "tile": {
      21. 
  
  
  
    21.  "scaleType": "inside",
      22. 
  
  
  
    22.  "width": 1350,
      23. 
  
  
  
    23.  "enableUrlCORSOrigin": true,
      24. 
  
  
  
    24.  "height": 1620,
      25. 
  
  
  
    25.  "tileSize": 254
      26. 
  
  
  
    26.  },
      27. 
  
  
  
    27.  "tileSources": [
      28. 
  
  
  
    28.  [
      29. 
  
  
  
    29.  "https://xxx.com/.../00_00_files/",
      30. 
  
  
  
    30.  ...
      31. 
  
  
  
    31.  ]
      32. 
  
  
  
    32.  ],
      33. 
  
  
  
      34. 
  
  
  
    34.  "backgroundColor": "#565656",
      35. 
  
  
  
    35.  "initColRow": [
      36. 
  
  
  
    36.  0,
      37. 
  
  
  
    37.  0
      38. 
  
  
  
    38.  ]
      39. 
  
  
  
    39. };
      40.

    动态库也支持链接方式传递配置，如果是跨域访问，需要配置跨域访问 CORS 规则。使用方法如下：

    • SWAN
     
 
 
      
  
  
  
      2.

    参考配置文件。

    动态库默认仅支持核心的 3D 环物渲染（多视角分级分块）和交互（拖拽缩放），也可以通过设置defaultui=true来显示默认的控件，支持 PC 和移动端的适配，支持功能包括：热点、缩放按钮、复位按钮、全屏按钮、二维码等，配置文件是在无 UI 配置项的基础上增加了相关字段，一个典型的有 UI 配置如下：

    • JS
     
 
 
      
  
  
  
    1. options = {
      2. 
  
  
  
    2.  "ver": 1,
      3. 
  
  
  
    3.  "scenes": [
      4. 
  
  
  
    4.  {
      5. 
  
  
  
    5.  "sceneName": "scene_01",
      6. 
  
  
  
    6.  "sceneType": "spin",
      7. 
  
  
  
    7.  "thumb": "https://xxx.com/.../thumb.jpg",
      8. 
  
  
  
    8.  "spinImages": [
      9. 
  
  
  
    9.  [
      10. 
  
  
  
    10.  "https://xxx.com/.../00.jpg"
      11. 
  
  
  
    11.  ]
      12. 
  
  
  
    12.  ],
      13. 
  
  
  
    13.  "tileSources": [
      14. 
  
  
  
    14.  [
      15. 
  
  
  
    15.  "https://xxx.com/.../00_00_files/",
      16. 
  
  
  
    16.  ...
      17. 
  
  
  
    17.  ]
      18. 
  
  
  
    18.  ],
      19. 
  
  
  
    19.  "colCount": 32,
      20. 
  
  
  
    20.  "rowCount": 1,
      21. 
  
  
  
    21.  "initColRow": [
      22. 
  
  
  
    22.  0,
      23. 
  
  
  
    23.  0
      24. 
  
  
  
    24.  ],
      25. 
  
  
  
    25.  "scaleType": "inside",
      26. 
  
  
  
    26.  "tileSize": 254,
      27. 
  
  
  
    27.  "minLevel": 9,
      28. 
  
  
  
    28.  "width": 8256,
      29. 
  
  
  
    29.  "height": 5504
      30. 
  
  
  
    30.  }
      31. 
  
  
  
    31.  ],
      32. 
  
  
  
    32.  "hotspotsInfo": [
      33. 
  
  
  
    33.  {
      34. 
  
  
  
    34.  "className": "info",
      35. 
  
  
  
    35.  "id": "adsasasd",
      36. 
  
  
  
    36.  "popup": {
      37. 
  
  
  
    37.  "describe": "正文显示，纯正文情况。测试测试测试测试测试测试测试测试",
      38. 
  
  
  
    38.  "img": "",
      39. 
  
  
  
    39.  "title": "超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb超长标题chb",
      40. 
  
  
  
    40.  "href": "https://www.baidu.com"
      41. 
  
  
  
    41.  },
      42. 
  
  
  
    42.  "tip": "车头561564126514651653165"
      43. 
  
  
  
    43.  },
      44. 
  
  
  
    44.  ...
      45. 
  
  
  
    45.  ],
      46. 
  
  
  
    46.  "hotspotsPos": {
      47. 
  
  
  
    47.  "scene_01": {
      48. 
  
  
  
    48.  "00_00": [
      49. 
  
  
  
    49.  {
      50. 
  
  
  
    50.  "id": "adsa55sasd",
      51. 
  
  
  
    51.  "x": 0.65,
      52. 
  
  
  
    52.  "y": 0.2
      53. 
  
  
  
    53.  },
      54. 
  
  
  
    54.  ...
      55. 
  
  
  
    55.  }
      56. 
  
  
  
    56.  },
      57. 
  
  
  
    57.  "guideListFilter": "global",
      58. 
  
  
  
    58.  "guideList": [
      59. 
  
  
  
    59.  {
      60. 
  
  
  
    60.  "scene": "scene_01",
      61. 
  
  
  
    61.  "view": "01_00",
      62. 
  
  
  
    62.  "id": "adsasasd"
      63. 
  
  
  
    63.  },
      64. 
  
  
  
    64.  ...
      65. 
  
  
  
    65.  ]
      66. 
  
  
  
    66. }
      67.

    参考含 UI 配置文件。

    动态库属性列表

    上支持的属性包括：

    属性名称 类型 说明
    optionsObject配置项
    configString配置项链接
    defaultuiBoolean是否显示默认控件

    关键配置项说明

    配置项名称 类型 说明
    thumbString缩略图 url
    spinImagesArray环视图 url 二维数组，第一维表示行，第二维表示列
    tileSourcesArray分块图目录 url 二维数组，第一维表示行，第二维表示列
    colCountNumber列数
    rowCountNumber行数
    initColRowArray初始视角
    scaleTypeString图像适配类型。inside：留白，crop：裁切
    tileSizeNumber分块 size
    widthNumber图像原始宽
    heightNumber图像原始高

    分享文章：创新互联百度小程序教程：spintileviewerVR3D环物-beta
    本文网址：http://www.hantingmc.com/qtweb/news16/221216.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

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

    猜你还喜欢下面的内容

    用户体验知识

    行业网站建设

    防护网厂　　 　营销型网站建设　　 　成都富士康招工　　 　成都企业网站制作　　 　虚拟主机　　 　成都企业网站定制　　 　成都光华机房　　 　域名注册　　 　全网品牌营销　　 　seo网络营销推广　　 　绵竹网站建设　　 　成都网站设计　　 　重庆企业网站建设　　 　四川电信高防服务器托管　　 　成都网站制作　　 　酒柜书柜鞋柜定制　　 　抖音短视频　　 　中国西部信息中心　　 　成都微信公众号开发　　 　手机网站版本