专栏首页秋风的笔记送花送包送红包,不如用JS送给Ta一个VR世界

送花送包送红包,不如用JS送给Ta一个VR世界

抱歉今天来晚了,本应该白天发才对,发生了一点点小插曲~

先上图感受一下,以梦幻城堡 - 迪士尼为例(gif觉得卡顿可以看视频)。

http://mpvideo.qpic.cn/0bf2huab4aaayqadtirjwbqfapoddy6qahqa.f10002.mp4?dis_k=4dd4fd8bd805d7455fb973c4bdffcf08&dis_t=1615431339&spec_id=MzkyOTIxMDAzNw%3D%3D1615431340&vid=wxv_1740093831359856641&format_id=10002

http://mpvideo.qpic.cn/0bf2vaab2aaa2madtqrjxjqfbkgddwuaahia.f10002.mp4?dis_k=c9f8798b7b7d36a003b89e91c3fbdd3d&dis_t=1615431340&spec_id=MzkyOTIxMDAzNw%3D%3D1615431340&vid=wxv_1740078835867418626&format_id=10002

心动了吗?你以为实现这个炫酷特效会很复杂?

不不不,实现这个特效只有两个步骤

  • 需要一张全景图
  • 使用 photo-sphere-viewer.js 进行配置 (一个用来来显示全景图JavaScript库)

全景图可以从这里免费下载(本实例的全景图在github仓库中)

https://pixabay.com/zh/images/search/360%C2%B0%E5%85%A8%E6%99%AF/

在线演示地址(手机打开效果更佳,资源没有优化,耐心等待~)

https://qiufeng.blue/frontend/demo/360-disney/simple.html

源码地址 https://github.com/hua1995116/vuepress-blog/tree/master/docs/frontend/demo/360-disney

代码详解

<style>
#photosphere {
 width: 100%;
 height: 100%;
}
</style>
</head>
<body>

<div id="photosphere"></div>

<script src="three.js"></script>
<script src="browser.js"></script> /*uEvent 的浏览器版本*/
<script src="photo-sphere-viewer.js"></script>

<script>
  const PSV = new PhotoSphereViewer.Viewer({
    container : 'photosphere', // 容器id
    panorama  : '360.jpg', // 全景图地址
    caption   : '',
    loadingImg: 'assets/photosphere-logo.gif', // loading的gif
    defaultLong: Math.PI/2 + Math.PI/12, // 默认角度
    defaultZoomLvl: 30,
  });
</script>
<script src="./snow.js"></script> /*下雪的场景*/

实现上面场景的代码非常简单,主要是有photo-sphere-viewer.js实现的,自己不需要加任何代码。

photo-sphere-viewer.js 也支持了非常多的控件,例如 mark 标记自动漫游以及设置分辨率等。

由于 photo-sphere-viewer.js 是基于 Three.js,因此必须引入 Three.js 的依赖,还依赖 uEvent 事件订阅相关的 API。

我再来看看增加插件会有哪些不一样的变化。

我们可以通过 mark插件来标记一些特殊的地点,并且还有标记列表,可以直达对应的地点。通过增加对应的点位来实现呈现出特殊意义的位置,可以是第一次相遇或者是第一次做了不可描述画面的地点(小朋友捂脸)...

PSV = new PhotoSphereViewer.Viewer({
  ...
 plugins: [
      [PhotoSphereViewer.MarkersPlugin, {
        markers: (function () {
          var a = [];

          a.push({
            id: '#123',
            tooltip: '第一次相遇的地点',
            latitude: -0.3988129280019779,
            longitude: 1.7374233460711157,
            image: 'assets/pin-red.png',
            width: 32,
            height: 32,
            anchor: 'bottom center',
          })
          return a;
        }())
      }]
 ]
 ...
})

var markers = PSV.getPlugin(PhotoSphereViewer.MarkersPlugin);
markers.toggleAllTooltips();

mark 不仅可以标记地点,还可以通过列表来进行引导

关于这个 snow特效是我随便找的一个js特效,你也可以通过不同的场景,换成雨、下星星啊,各种浪漫的场景~

赶紧收藏这个效果吧~

有男/女朋友的晚上就可以实践起来了,花不了几分钟工夫。没有的,可以收藏,下次给TA一个惊喜(离5.20也没多少天了)。

这次先水一篇,下次再来分享其中的技术细节。

最后,祝愿有对象的长长久久,没有的,2021能够找到心仪的对象(留言说地点-性别配对啦,在线搭个线)?

结语

关注公众号秋风的笔记,一个专注于前端面试、工程化、开源的前端公众号

本文分享自微信公众号 - 秋风的笔记(qiufengnote),作者:蓝色的秋风

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-02-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 520程序猿用最时尚的方式说爱你

    程序猿浪漫起来更让人动心!程序猿可以用诗词暗示对方,山有木兮木有枝,心悦君兮,君不知窈窕淑女,君子好逑。程序猿表白起来更让人惊心!在程序猿的面向对象的世界里,程...

    一猿小讲
  • 别琢磨了,七夕礼物都给你想好了

    翻了下日历,发现马上就要到七夕了,惊不惊喜? 有准备好礼物么,包包、口红、花花这些是不是以往都送过了,想不出什么能送的新花样了? 别急,给你想好了几个礼物,清新...

    腾讯技术工程官方号
  • 520 特供!这 5 款小程序,教你表白、虐狗、脱单,玩出新花样

    各路商家、媒体已经开始释放各种招数,四处营造节日氛围。不管是情侣还是单身狗,大家内心都是不平静的。

    知晓君
  • 绿色情人节,换种方式说 .我爱你

    他是中国跑得最快的人,却娶了跑得最慢的女孩。从校服到婚纱,16年爱情长跑,每周交换日记表达心意...... 好好地看个奥运会,却被塞一把狗粮,过个七夕岂不甜到...

    腾讯云DNSPod团队
  • 传送科技姜英才:未来五年内,PC VR都会变为无线VR | 镁客请讲

    镁客网
  • 24h限免!37G PHP教程大全,从网页开发到项目实战到面经大放送!

    很多技术人喜欢这么调侃,包括真的喜欢PHP的、不用PHP的甚至是一些不喜欢PHP的。

    养码场
  • 《手机安全与可信应用开发指南:TrustZone和OP-TEE技术详解》读书笔记

    本文是《手机安全与可信应用开发指南:TrustZone和OP-TEE技术详解》的读书笔记,需要更详细的内容和源码,请自行购买书籍。

    辉哥
  • VR欲飞高走远,这三点不得不突破

    VRPinea
  • 干货分享丨讲真,一款爆款游戏应该这样打造!

    VRPinea
  • 5G+文化旅游,开启行业新篇章 | 创新案例

    2019年被称为中国的5G元年,根据工业和信息化部发布的消息,5G产品有望今年下半年上市。目前,我国25个省(区、市)正在进行5G网络试点。 5G技术的强大支持...

    腾讯文旅
  • Vision VR/AR峰会高手不少,行业巨头新品动作不断

    VRPinea
  • 谁说成人展上只有大胸美女,这些高科技你同样不能错过

    VRPinea
  • 打打游戏就能在北京二环买套房?区块链大神说:你能靠VR刷怪升级还房贷!

    不得不感叹,太空真美,人类真渺小。刘慈欣将极致空灵的想象力与厚重的现实完美结合,在成功收获超高票房的同时,也预示了中国科幻电影的一次大跨步前行。

    区块链大本营
  • 盘点丨Oculus Touch前5游戏,你都玩过了吗?

    VRPinea
  • NASA正加速推进其“宇航员登陆火星”计划,VR将起关键作用

    VRPinea
  • 如何优雅地要到女神手机号?腾讯来给你神助攻 | 亲儿子 #33

    玩腻了发红包,今天知晓程序就给大家介绍一款腾讯做的「话费送好友」小程序,让好友一下就能记住你。

    知晓君
  • 口红?剃须刀?Python告诉你,刚过去的520,大家都在送什么礼物

    【导语】:今天我们来聊一聊刚过去的520,大家买得最多的都是什么?Python技术部分请看第二部分。

    CDA数据分析师
  • [译] 建立一个像科幻小说一样的虚拟世界:设计一个全球性的虚拟世界

    Android 开发者
  • 直击上海成人展现场,这些智能化互动产品最受热捧

    VRPinea

扫码关注云+社区

领取腾讯云代金券