雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

三种微信小程序VR实现方法

2021-03-15 分类:前端之旅 / 后端之路 阅读(16054) 评论(0)

经常有人会问我小程序里怎么实现vr, 今天简单介绍两种小程序里vr的实现方法; 给大家提供参考;

第一种: 使用 photo-sphere-viewer 插件

文档地址: https://photo-sphere-viewer.js.org/

很简单的加载一张全景图:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>芊云全景VR预览全景</title>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>
  <script src="//cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    #viewer {
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>
<body>
<div id="viewer"></div>
<script>
  var viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer'),
    panorama: '全景图地址'
  });
</script>
</body>
</html>

具体的详细用法可以查看开发文档, 这个插件可以实现很多功能, 包括热点, 视角, 等等, 感兴趣可以试试

2. 第二种, 使用 krpano

文档地址: https://krpano.com/home/

krpano 是收费软件, 需要授权才可以使用, 并且比较复杂一些, 感兴趣的可以去搜索相关资料

初始化一张全景, 需要先使用krpano引擎把全景做切片,

1
2
3
4
5
6
7
embedpano({
          swf: "tour.swf",
          xml: "playxml.html"
          html5: "only+webgl+preserveDrawingBuffer",
          mobilescale: 0.5,
          passQueryParameters: true
});

所有的配置及参数都在 xml 文件中;

具体可查看: https://krpano.com/docu/xml/

 

第三种: 将全景图上传到芊云全景制作生成h5链接, 直接 iframe 加载

WechatIMG7

首选打开芊云全景: https://vr.he29.com

根据提示上传制作h5, 制作完成后点击复制链接, 可以得到一个h5链接:

例如: https://vr.he29.com/d/604e4cceefc5e06.html

 

重点来了, 可以直接在地址栏上加上参数: https://vr.he29.com/d/604e4cceefc5e06.html?h=1

就可以屏蔽全景上面有关 芊云全景的一些UI信息, 这样嵌入网页就很ok了~

最终效果如下:

分享到:更多 ()

相关推荐

  • AI 编辑器 cursor 如何禁止自动更新
  • AI 编辑器 cursor 工具栏改成和 vscode 一样的左侧 竖向展示
  • 将docker安装到D盘或者其他目录
  • 使用 python 给音频增加水印,剪辑压缩后不丢失!
  • nodejs 脚本打包为可执行文件
  • 初学 python 笔记
  • nodejs 同时运行多个脚本
  • 让你的照片动起来
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年7月
一 二 三 四 五 六 日
« 六    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说:
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说:
  • Dawn 9年前 (2016-09-16)说:
    call_user_func_array最后的例子是错哦,你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说:
    tp框架设置了全局捕获异常的,这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说:
    构造函数里的判断 用异常机制可能更好一些

其他类型

  • 芊云全景
  • 配音兔AI配音神器

博客类型

  • 芊云全景
  • 配音兔AI配音神器

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔AI配音神器

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图