Introduction to the

The latest xiaobian in understanding the knowledge related to panorama. Through this article, I want to take you to unbox the Photowebsphere Viewer framework.

The PhotoSphereViewer framework is a JavaScript library that displays PhotoSphere panoramic photos based on three.js secondary encapsulation. From the current xiaobian learning situation, xiaobian feel that this framework is very powerful, is worth playing a plug-in, in case there is a similar need for it.

What can we do with the Websphere Viewer framework?

From the animated figure, we can see that we switch the view area of the picture in a div, just like we control the perspective of a camera to observe the specific content of different positions in the picture. In addition, we can draw the desired area in the picture and add relevant content description to the drawing area.

But the plug-in offers more than that, and readers can see what else the plug-in has to offer on their own. The main purpose of this article is to unpack the plugin and make sure it works.

Official document: photo-sphere-viewer.js.org/

Photowebsphere Viewer used out of the box

Plug-in references

  • NPM install
npm install photo-sphere-viewer
Copy the code
  • Direct import
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>
Copy the code

Here xiaobian uses NPM installation.

The plug-in USES

  • HTML and CSS sections
<div id="viewer"></div>// The root node of the panorama must have width and height<style>
  #viewer {
    width: 100vw;
    height: 50vh;
  }
</style>
Copy the code
  • JavaScript part
import { Viewer } from 'photo-sphere-viewer';
// The officially supplied style file must be imported
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css';
import image from './assets/2294472375_24a3b8ef46_o.jpg';
const viewer = new Viewer({
  // Panorama root node
  container: document.querySelector('#viewer');
  // Panorama image path
  panorama: image;
})
Copy the code

If the code is correct, an instance of the panorama has been created, and we can happily start using the apis provided by the official Viewer instance.

Here xiaobian to provide you with two practice using the panorama, you can take it yourself.

conclusion

As for the implementation principle of the framework and the meaning of various professional terms, if you are interested in it, you can understand it by yourself. In fact, I have learned a little about the principle, but I do not understand it very well. You can start with the relevant knowledge of Three. js and WebGL to better understand the implementation principle of the framework. Of course what doubt can also leave a message to ask me, maybe I answer come up hey hey hey. Have a good time. The following is my actual operation and a little sorting according to the API documents provided by the official, you can refer to it if you need.

API reference

Photo Sphere Viewer

All method practices under the Viewer instance.

// To use Photo Sphere Viewer, you must import the appropriate styles
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css';
// Style of marker plugin (must be introduced if used by plugin)
import 'photo-sphere-viewer/dist/plugins/markers.css';
const viewer = new Viewer({
  container: document.querySelector('#container'),
  / / panorama
  panorama: 'http://*******.jpg'});Copy the code

animate(Object options)

Zoom in and out of the view with smooth transitions

Options Passable parameters:

Name Type Argument Description
speed number|string animation speed or duration (in milliseconds)
zoom number optional new zoom level between 0 and 100 
viewer.animate({
  speed: 2000Zoom:88
});
Copy the code

stopAnimation()

Stop animation in progress. Because the animation stops asynchronously, this method returns a Promise.

viewer.stopAnimation().then(() = > {
  // Write what you want to write here
})
Copy the code

destroy()

Destroy the Panorama Viewer. Currently, this method cannot completely clear the memory used by the THREE framework context used internally.

viewer.destory();
Copy the code

enterFullscreen()

Enter the full-screen mode

viewer.enterFullscreen();
Copy the code

exitFullscreen()

Exit the full-screen mode

viewer.exitFullscreen();
Copy the code

getPlugin(pluginId)

Load additional plug-ins provided by Photo Sphere Viewer, which must be official. This method returns an instance of the plug-in (if it exists)

import MarkersPlugin from 'photo-sphere-viewer/dist/plugins/markers.js';
import { Viewer } from 'photo-sphere-viewer';
const viewer = new Viewer();
const plugin = viewer.getPlugin(MarkersPlugin);
Copy the code

getPosition()

Gets the current position of the camera

const position = viewer.getPosition();
console.log(position);
// { latitude: 0, longitude: 0 }
Copy the code

getSize()

Gets the width and height of the current viewer, which change as the currently visible Container size changes.

const size = viewer.getSize();
console.log(size);
// { width: 762, height: 640 }
Copy the code

getZoomLevel()

Gets the current scale hierarchy

const level = viewer.getZoomLevel();
console.log(level);
/ / 50
Copy the code

isAutorotateEnabled()

Check whether auto rotation is enabled, true if auto rotation is enabled, false otherwise

const isAutorotate = viewer.isAutorotateEnabled();
console.log(isAutorotate);
// false
Copy the code

isFullscreenEnabled()

Check whether full screen is enabled. Full screen is true; otherwise, false

const isFullScreen = viewer.isFullscreenEnabled();
console.log(isFullScreen);
// false
Copy the code

needsUpdate()

Mark the view changed for the next rendering (purpose unknown)

viewer.needsUpdate();
Copy the code

refreshUi()

Refresh the interface (usage unknown)

viewer.refreshUi();
Copy the code

resize(Object size)

Adjust the size of the panorama view window. The following are the optional parameters of size

Name Type Argument Description
width string The units can be px,%, or auto
height string The units can be px,%, or auto 
viewer.resize({
  width: '2000px'.height: '1000px'
});
Copy the code

rotate(Object position)

Move the view to a specific latitude and longitude. Positions can be represented by spherical coordinates (radians or degrees) or texture coordinates (PX).

Name Type Argument Description
longitude number
latitude number
x number
y number 
viewer.rotate({
  longitude: 3.493520870365421.latitude: 0.0863177810938982
});
Copy the code
viewer.rotate({
  x: 229.y: 968
});
Copy the code

setOption(option, value)

Changes the Viewer’s configuration items, some of which cannot be changed.

Name Type Decription
option string Panorama, panoData, container, and plugins cannot be changed
value any

Option Specifies configurable parameters:

Name Type default Decription
caption string Text displayed in the navigation bar. If the navigation bar is disabled, it will always be displayed, but there is no button. HTML is allowed.
loadingImg string Displays the path of the loading circle image when the panorama is just loaded.
loadingTxt string Loading… Displays the text loading the center of a circle when the panorama is just loaded, valid only if loadingImg is not configured.
size object The final size of the panorama container. By default, the container size of the human root is used. This configuration is also followed when resizing the window.
fisheye boolean|double false Fisheye pattern, which has adverse effects on markers. Use true to enable the fisheye effect or specify the effect strength (true = 1.0)
minFov integer 30 Minimum field of vision, between 1 and 179. The minimum field size should be smaller than the maximum field size.
maxFov integer 90 Maximum field of view, between 1 and 179. The maximum field size should be greater than the minimum field size.
defaultZoomLvl integer 50 Default zoom level. Between 0 (maximum field of view) and 100 (minimum field of view).
defaultLong double | string 0 The default positioning longitude for view loading is between 0 and 2π
defaultLat double | string 0 The default orientation dimension for view loading is between -π/2 and π/2
sphereCorrection { pan: double, tilt: double, roll: double } { pan:0, tilt:0, roll: 0 } Angle of rotation of a sphere, in radians. Pan: rotation about the x axis, titl: rotation about the y axis, roll: rotation about the Z axis.
moveSpeed double 1 Manual sliding speed increases by multiples
zoomButtonIncrement double 2 Scaling increments when using keyboard or navigation bar buttons.
autorotateDelay integer null Used to define the delay (ms) for the start of automatic rotation. Temporary test does not take effect
autorotateSpeed string 2rpm The speed of automatic rotation. The unit is RPM.
autorotateLat double | string defaultLat Perform automatic rotation of latitude.
moveInertia boolean true Enable smooth animation after manual movement. (Inertia after sliding panorama stops)
mousewheel boolean true Whether to zoom using the mouse wheel.
mousewheelSpeed double 1 Zoom speed when using the mouse wheel.
mousemove boolean true Whether to use the mouse cursor for panoramic rotation.
captureCursor boolean false Simply move the cursor over the view instead of clicking + Move to rotate the panorama.
touchmoveTwoFingers boolean false It takes two fingers to rotate the panorama. If enabled, a message overlay that requires the user to use two fingers is displayed when only one touch is detected. Note: This configuration is invalid on the PC.
useXmpData boolean true The true image size is read from XMP data and must be kept true if the panorama is cropped after the shot.
withCredentials boolean false Use qualification credentials for HTTP requests
navbar array [‘autorotate’, ‘zoomOut’, ‘zoomRange’, ‘zoomIn’, ‘download’, ‘caption’, ‘fullscreen’] Navigation bar button configuration. In addition to the default configuration, the navigation bar also allows for custom add buttons.
lang object lang: { autorotate: ‘Automatic rotation’, zoom : ‘Zoom’, zoomOut : ‘Zoom out’, zoomIn : ‘Zoom in’, download : ‘Download’,fullscreen: ‘Fullscreen’, menu: ‘Menu’, twoFingers: [‘Use two fingers to navigate’], loadError : ‘The panorama can’t be loaded’,} All kinds of text prompts in the panorama. For example, the description of a navigation bar button.
keyboard boolean|object keyboard: { ‘ArrowUp’: ‘rotateLatitudeUp’, ‘ArrowDown’: ‘rotateLatitudeDown’, ‘ArrowRight’: ‘rotateLongitudeRight’, ‘ArrowLeft’: ‘rotateLongitudeLeft’, ‘PageUp’: ‘zoomIn’, ‘PageDown’: ‘zoomOut’, ‘+’: ‘zoomIn’, ‘-‘: ‘zoomOut’, ‘ ‘: ‘toggleAutorotate’ } Enable and configure keyboard navigation when the view is in full screen. Speaking is the keyboard shortcut configuration when the view is in full screen. 
viewer.setOption('fisheye'.true);
Copy the code

setOptions(options)

Changes configuration items for multiple Viewers, some of which cannot be changed. Refer to the configuration table delivered with setOption() for configuration items.

Viewer. SetOption ({fisheye:true.defaultZoomLvl: 60
});
Copy the code

setPanorama(path, options)

Load a new panorama file with the option to change camera position/zoom and activate transition animation. If the Camera option is not defined, the Camera option will not continue to move. If another panorama file load is already in progress, it will be aborted.

Name Type Description
path string|Array|PSV.Cubemap The address of the panorama file
options object: PanoramaOptions
Name Type Argument Default Desctiption
transition boolean | number 1500 Duration of transition between all panoramas and new panoramas
showLoader boolean true show the loader
sphereCorrection object New sphere correction for panoramic applications
panoData object PanoData for the new panorama

Since the Api test is invalid, details will not be expanded. See if the official website will be updated later.

showError(message)

Displays an error message mask layer at the top of the view.

Name Type Description
message string 
viewer.showError('I'm an error message');
Copy the code

hideError()

Hide error messages.

viewer.hideError();
Copy the code

startAutorotate()

Enable panorama auto rotation.

viewer.startAutorotate();
Copy the code

stopAutorotate()

Stop panorama auto rotation.

viewer.stopAutorotate();
Copy the code

startKeyboardControl()

Enable keyboard controls, that is, you can use keyboard shortcuts for some action operations in panorama. (The keyboard control will be automatically opened when the panorama enters full-screen mode).

viewer.startKeyboardControl();
Copy the code

stopKeyboardControl()

Disable keyboard controls. (Keyboard controls are also automatically disabled when exiting full-screen mode)

viewer.stopKeyboardControl()
Copy the code

toggleAutorotate()

Start or stop panorama auto rotation. When the panorama is rotating, it stops, and when the panorama is not rotating, it turns on.

viewer.toggleAutorotate();
Copy the code

toggleFullscreen()

Enter or exit the full-screen mode. When the panorama is turned on in full screen, the panorama exits in full screen; when the panorama is not in full screen, the panorama enters into full screen mode.

viewer.toggleFullscreen();
Copy the code

zoom(level)

Name Type Description
level number Scale levels to adjust the number of levels between 0 and 100 
viewer.zoom(100);
Copy the code

zoomIn()

Level scaling +1.

viewer.zoomIn();
Copy the code

zoomOut()

Level scaling -1.

viewer.zoomOut();
Copy the code