In the past two years, with the popularity of VR, there have also been a lot of house purchase and second-hand housing software small program VR house viewing function, to achieve the experience of staying indoors, so how to achieve such a function?

The 360°×180° photo-sphere-Viewer and its plug-in (only the Markers are used here)

photo-sphere-viewer

Photo-sphere-viewer is based on three.js and uEvent 2

Download the plugin

Use NPM or YARN to download and install

npm install photo-sphere-viewer

yarn add photo-sphere-viewer
Copy the code

Or manually download and install via Promise-Polyfill

use

<template>
  <div id="viewer"></div>
</template>
<script>
    import {Viewer} from 'photo-sphere-viewer'
    import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
    export default {
        data(){
            return{
                viewer:' '.imgurl1:require('.. /assets/1.jpg'),}},mounted(){
            this.viewer = new Viewer({
                container:document.querySelector('#viewer'),
                panorama:this.imgurl1,
                size: {width: '100vw'.height: '50vh',}}); }}</script>
Copy the code

Commonly used parameters

Container (required) types: HTMLElement | identifier string contains panorama or elements of an HTML element.

container: document.querySelector('.viewer')
container: 'viewer' // will target [id="viewer"]
Copy the code

Panorama (required) types: string | string [] | object the path of the panoramic image. For isometric panoramas, it must be a single string (the 720° panorama I used in this article); For a cube map, it must be an array or object (for six faces).

// Equirectangular panorama :
panorama: 'path/to/panorama.jpg'

// Cubemap as array (order is important) :
panorama: [
  'path/to/left.jpg'.'path/to/front.jpg'.'path/to/right.jpg'.'path/to/back.jpg'.'path/to/top.jpg'.'path/to/bottom.jpg',]// Cubemap as object :
panorama: {
  left:   'path/to/left.jpg'.front:  'path/to/front.jpg'.right:  'path/to/right.jpg'.back:   'path/to/back.jpg'.top:    'path/to/top.jpg'.bottom: 'path/to/bottom.jpg',}Copy the code

Plugins type: array List of enabled plugins. (Such as marker plug-in marker, which will be used later)

Markers markersList gyroscope gyroscope to switch to stereo viewsCopy the code

Caption Type: String Displays text in the navigation bar. If the navigation bar is disabled, it will always be displayed, but there is no button. HTML is allowed. Size type: {width: integer, height: integer} Final size (if panorama container). By default, the size used by Container is followed when resizing the window. Navbar Configures the navigation bar.

Zoom: zoomOut+ zoomRange+zoomIn Title fullscreen: Switch to the full-screen viewCopy the code

Custom navigation bar buttons:

 navbar: [
    {
      id: 'my-button'.// The unique identifier of the button, useful when using the navbar.getButton() method
      content: 'Custom'.// Required, button content
      title: 'Hello world'.// A tooltip is displayed when the mouse hovers over the button
      className: 'custom-button'.// The CSS class has been added to the button
      onClick: () = > {
        alert('Hello from custom button');// The required function that is called when the button is clicked
      }
      //disabled:false, initially disables the button
      // Hidden :false, initially hide the button},]Copy the code

Please refer to the official website for more parameters

Markers plug-in

The official plug-ins (listed in the menu on the left) can be found in the main package in the directory Photo-sphere-Viewer. Some plug-ins also have additional CSS files.

The import

import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers'
import 'photo-sphere-viewer/dist/plugins/markers.css';
Copy the code

use

All plug-ins contain a JavaScript class that must be supplied to the Plugins array. Some plug-ins will also take configuration objects provided in nested arrays.

this.viewer = new Viewer({
    container:document.querySelector('#viewer'),
    panorama:this.imgurl1,
    size: {width: '100vw'.height: '50vh',},plugins: [
        [MarkersPlugin, {
            markers: [{id:'circle'.tooltip:'A circle of radius 30'.circle:30.svgStyle : {
                        fill:'rgba(255,255,0,0.3)'.stroke:'yellow'.strokeWidth:'2px',},longitude: -1.5.latitude: -0.28.anchor: 'center right',}],}],],});Copy the code

After initialization, the getPlugin method can be used to get the plug-in instance, allowing methods to be invoked on the plug-in and events to be subscribed to.

const markersPlugin = this.viewer.getPlugin(MarkersPlugin);

markersPlugin.on('something'.() = > {
  / *... * /
});
Copy the code

Click to see more parameter methods for tag plug-ins

The final result

The final code

<template>
  <div id="viewer"></div>
</template>
<script>
    import {Viewer} from 'photo-sphere-viewer'
    import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers'
    import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'
    import 'photo-sphere-viewer/dist/plugins/markers.css';
    export default {
        data(){
            return{
                viewer:' '.imgurl1:require('.. /assets/1.jpg'),
                imgurl2:require('.. /assets/2.jpg'),
                imgurl3:require('.. /assets/3.jpg'),}},mounted(){
            this.viewer = new Viewer({
                container:document.querySelector('#viewer'),
                panorama:this.imgurl1,
                size: {width: '100vw'.height: '50vh',},plugins: [
                    [MarkersPlugin, {
                        markers: [{id:'circle'.tooltip:'A circle of radius 30'.circle:30.svgStyle : {
                                    fill:'rgba(255,255,0,0.3)'.stroke:'yellow'.strokeWidth:'2px',},longitude: -1.5.latitude: -0.28.anchor: 'center right',}],}],],});const markersPlugin = this.viewer.getPlugin(MarkersPlugin);

            markersPlugin.on('select-marker'.(e, marker) = > {
                this.viewer.animate({
                    longitude: marker.config.longitude,
                    latitude: marker.config.latitude,
                    zoom: 100.speed: '-2rpm',
                }).then(() = >
                    this.viewer.setPanorama(
                        this.imgurl2
                    ).then(() = >
                        markersPlugin.updateMarker({
                            id: marker.id,
                            longitude: -1.8.latitude: -0.28,}).this.viewer.animate({
                            zoom: 50.speed: '2rpm',
                        }).then(() = >
                            this.imgurl2 = this.imgurl3,
                            console.log("Continue operation"))))}); }}</script>
Copy the code

The final result

GIF is too large, the compression effect is not good, but does not affect the function display, it is recommended to run it once

Material picture

Note: Image source network