JS can also be so romantic, using JS to write down a world (VR)

Time:2021-6-11

Let’s first feel the above image, taking Disney castle as an example.

JS can also be so romantic, using JS to write down a world (VR)

JS can also be so romantic, using JS to write down a world (VR)

Are you excited? Do you think it’s going to be complicated to implement this cool special effect?

No, there are only two steps to achieve this effect

  • We need a panoramic view
  • Configure with photo-sphere-viewer.js (a JavaScript library for panoramic image display)

You can download panoramic images for free from here

https://pixabay.com/zh/images…

Online demo address (better effect when mobile phone is turned on)https://qiufeng.blue/frontend…

JS can also be so romantic, using JS to write down a world (VR)

Source code address:https://github.com/hua1995116…

Code explanation

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

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

<script></script>
Browser version of < script > < / script > / * uevent*/
<script></script>

<script>
  const PSV = new PhotoSphereViewer.Viewer({
    Container: 'photosphere' // container ID
    Panorama: '360. JPG' // panorama address
    caption   : '',
    Loadingimg: 'assets / photosphere logo. GIF' // GIF of loading
    Defaultlong: math.pi/2 + math.pi/12, // default angle
    defaultZoomLvl: 30,
  });
</script>
< script > < / script > / * snow scene*/

The code to realize the above scenario is very simple, mainly includingphoto-sphere-viewer.jsImplementation, they do not need to add any code.

photo-sphere-viewer.jsIt also supports many controls, such asMark markAuto roaming as well asSet resolutionAnd so on.

becausephoto-sphere-viewer.jsIt’s based onThree.js Therefore, it must be introducedThree.jsWe depend on, we depend onuEventAPI related to event subscription.

Let me see what changes will be made by adding plug-ins.

We can go through itmarkPlug in to mark some special locations, and there is a list of tags, which can go directly to the corresponding location. By adding the corresponding points to achieve a special meaning of the location, can be the first time to meet or the first time to do a non descriptive picture of the location (children cover their faces)

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

          a.push({
            id: '#123',
            Tooltip: 'where we first met',
            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();

JS can also be so romantic, using JS to write down a world (VR)

markYou can not only mark places, but also guide them through lists

JS can also be so romantic, using JS to write down a world (VR)

About thissnowSpecial effects is a JS special effect that I casually find. You can also change it into rain, stars and various romantic scenes through different scenes~

Hurry to collect this effect~

epilogue

❤️ Follow + like + collect + comment + forward ❤️It’s not easy to be original and encourage the author to create better articles

Official accountNotes of autumn windA front end official account focused on front-end interview, engineering and open source.
JS can also be so romantic, using JS to write down a world (VR)

  • Reply after followingresumeGet 100 + sets of exquisite resume templates
  • Reply after followingFriendsPull you into technical communication group + interview communication group
  • Welcome to pay attentionNotes of autumn wind