An overview of the

In daily life, we are more common is the block panorama, Baidu through the street View car collection of street view data, and finally form a panoramic application, Baidu panorama also has certain interactive functions, can move the street view with the street, as an individual developer, there are some open source libraries to meet our application and exploration of panorama. Aframe is a powerful framework that can also be used to implement panoramic functions. Photo Sphere Viewer, a panoramic library implemented using Three, will be briefly used next.

An introduction to

  1. The installation
/ / installation
npm install photo-sphere-viewer
// Install dependencies
npm install three.js uevent
Copy the code
  1. HTML don’t forget to set the width and height of the div
<div id="viewer"></div>
Copy the code
  1. Initialize the
import { Viewer } from 'photo-sphere-viewer';

const viewer = new Viewer({
  container: document.querySelector('#viewer'),
  panorama: 'test.jpg' // Image address
});
Copy the code

Test picture address

Further use

Panoramic data from multiple images

At present, there are many kinds of panoramic data. For our introduction, we will use the situation that the panoramic data is a whole picture, or how many pictures there are, or even the panoramic data in the form of tiles.

panorama: 'test.jpg' // Image address
// If it is multiple, you can organize it and pass it to the same attribute
// We need to write arrays in order
panorama: [
  'left.jpg'.'front.jpg'.'right.jpg'.'back.jpg'.'top.jpg'.'bottom.jpg',]// Object writing is also possible, both of which can support multiple images
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

Test picture 1 Test picture 2

Add tag

When playing with the panorama feature, we naturally want some interactive effects, and the open source library supports this effect. It allows you to mark points on a panorama with any icon, or draw an area, or add a paragraph of text, and click on the interaction. A long code is posted here to explain. Click here for an online example

var viewer = new PhotoSphereViewer.Viewer({
  panorama: 'https://photo-sphere-viewer-data.netlify.app/assets/sphere.jpg'.container: 'photosphere'.defaultLat: 0.3.touchmoveTwoFingers: true.mousewheelCtrlKey: true.// Whether to enable CTRL + Scroll wheel zoom
  // List of plug-ins
  plugins: [
    // Tag plugins
    [PhotoSphereViewer.MarkersPlugin, {
    // Mark the list
      markers: [{
          // The tag will pop up
          id: 'image'.longitude: 0.32.latitude: 0.11.image: 'https://photo-sphere-viewer.js.org/assets/pin-blue.png'.width: 32.height: 32.anchor: 'bottom center'.tooltip: 'A image marker. Click me! './ / prompt dialog box
          content: document.getElementById('lorem-content').innerHTML // Popover content
        },
        {
          // Custom styled markup
          id: 'text'.longitude: 0.latitude: 0.html: 'HTML marker ♥ '.// Display the content
          anchor: 'bottom right'.scale: [0.5.1.5].style: {
            maxWidth: '100px'.color: 'white'.fontSize: '20px'.fontFamily: 'Helvetica, sans-serif'.textAlign: 'center'
          },
          tooltip: {
            content: 'An HTML marker'.position: 'right'}}, {/ / surface markers
          id: 'polygon'.polylineRad: [[6.2208.0.0906],
            [0.0443.0.1028],
            [0.2322.0.0849],
            [0.4531.0.0387],
            [0.5022, -0.0056],
            [0.4587, -0.0396],
            [0.2520, -0.0453],
            [0.0434, -0.0575],
            [6.1302, -0.0623],
            [6.0094, -0.0169],
            [6.0471.0.0320],
            [6.2208.0.0906]],svgStyle: {
            fill: 'rgba (200, 0, 0, 0.2)'.stroke: 'rgba (200, 0, 50 and 0.8)'.strokeWidth: '2px'
          },
          tooltip: {
            content: 'A dynamic polygon marker'.position: 'right bottom'}}, {/ / line mark
          id: 'polyline'.polylinePx: [2478.1635.2184.1747.1674.1953.1166.1852.709.1669.301.1519.94.1399.34.1356].svgStyle: {
            stroke: 'rgba (140, 190, 10, 0.8)'.strokeLinecap: 'round'.strokeLinejoin: 'round'.strokeWidth: '10px'
          },
          tooltip: 'A dynamic polyline marker'
        },
        {
          / / garden markers
          id: 'circle'.circle: 20.x: 2500.y: 1000.tooltip: 'A circle marker'}]}]});var markersPlugin = viewer.getPlugin(PhotoSphereViewer.MarkersPlugin);

/** * Click create new tag */
viewer.on('click'.function(e, data) {
  if(! data.rightclick) { markersPlugin.addMarker({id: The '#' + Math.random(),
      longitude: data.longitude,
      latitude: data.latitude,
      image: 'https://photo-sphere-viewer.js.org/assets/pin-red.png'.width: 32.height: 32.anchor: 'bottom center'.tooltip: 'Generated pin'.data: {
        generated: true}}); }});/** * double click to remove the mark * right click to change the icon picture */
markersPlugin.on('select-marker'.function(e, marker, data) {
  if (marker.data && marker.data.generated) {
    if (data.dblclick) {
      markersPlugin.removeMarker(marker);
    } else if (data.rightclick) {
      markersPlugin.updateMarker({
        id: marker.id,
        image: 'https://photo-sphere-viewer.js.org/assets/pin-blue.png'}); }}});Copy the code

About the coordinate system, there are two sets of coordinate system, one is texture coordinate, the other is radian coordinate, texture coordinate cannot be used in multi-image panorama.

conclusion

From the perspective of dependency, the library is developed based on Three and UEvent. Three implements the basic functions of panorama, while UEvent implements related monitoring events. If you want to continue your research, you can run these official examples of Three by yourself: Example 1, example 2, example 3, understand these a few, you can implement a panoramic feature. As I mentioned at the beginning, there is another library that can implement panoramas, Aframe. This library is relatively large because it can implement more than just panoramas, it can implement AR functions and so on. I will introduce it in another article.

Welcome to my personal blog