This is based on three.js+photo-sphere-viewer.js panorama scene switch

Effect: http://122.51.121.122:8066/szovo CSDN download link: download.csdn.net/download/qq… Download from github: github.com/skillyu/vr-

The reason was very simple. The company wanted to make a panorama for publicity, and I happened to know some three.js, so the task was handed to me. After a period of research, I found that some companies in the market now are mainly engaged in panorama display. The technology they use is based on a mature paid plugin. So I chose Three.js +photo-sphere-viewer.js to achieve the panorama effect. Let’s first learn about Photo Sphere Viewer, which is a 360X180 degree panorama preview JS plug-in based on three.js. The JS plugin can rotate 360 degrees to view the panorama, and can also view the image up and down 180 degrees. The only requirement to use this plug-in is that the browser supports Canvas or WebGL. Photo Sphere Viewer is pure JS and based on three.js, which allows WebGL systems (the latest browsers) to be supported on other systems that support HTML Canvas and performs quite well. It also works with touch screens!

1. Introduce three.min.js and photo-sphere-viewer.min.js files when using the panorama plug-in.

Download the photo – sphere – viewer. Js

2. Introduce panoramic images

Where URL is the address of panorama, can be a network link, can also be local, because this project uses the picture of the server, if the picture cannot be displayed, you can replace desc is the name of the panorama set

Var panos = [{url: 'http://122.51.121.122:8066/image/01.jpg', desc: 'panoramic page a, target: {latitude longitude: 3.848: 0.244}}, {url: 'http://122.51.121.122:8066/image/02.jpg', desc: 'panoramic page 2, target: {latitude longitude: 0:0}},Copy the code
3. Load the panorama

The photohereViewer method is used to load panoramic images, which are annotated more fully than they should be

Var PSV = new PhotoSphereViewer({container: 'photosphere',// Panorama: panos[0]. Panos [0].desc,// header time_anim: false, default_long: math.pi / 2, loading_img: ", loading_txt: ", cache_texture:10, // The navigation bar is an array that can contain the following core buttons: Auto Rotate, Zoom, Download, mark, gyro, stereo, full screen, and a title and object for creating custom buttons called Navbar: ['autorotate', // Automatically rotate button 'zoom', // zoom button 'markers', 'spacer-1', 'select ', // display upper Caption parameter 'gyroscope', 'fullscreen'// anim_speed: "0.6 RPM ",// Tags: (function() {return common1(); }}) ());Copy the code
4. The panorama function and buttons on each page will be referred to in the last two pictures because of a lot of code, and the project link will be given later

Then attach the parameters and methods that I have read and want to vomit:

Here is a list of its parameters: panorama: mandatory parameter, path to the panorama. Container: Mandatory parameter to place the div element of the panorama. Autoload: Optional. The default is true, which automatically calls the panorama and false, which loads the panorama later (via the.load() method). Usexmpdata: Optional, default true if Photo Sphere Viewer must read XMP data. Default_position: Optional. The default value is {}. Defines the default position and the first point that the user sees, for example: {long: math. PI, lat: math.pi /2}. Min_fov: This parameter is optional. The default value is 30. The unit is degrees. Max_fov: This parameter is optional. The default value is 90. The maximum area to observe, in units of degrees, is 1 to 179. Allow_user_interactions: Optional. Default is true. If this is set to false, user interaction with the panorama is prohibited (the navigation bar is unavailable). Tilt_up_max: This parameter is optional. The default value is math.pi /2. The unit is radians. Tilt_down_max: This parameter is optional. The default value is math. PI/2. Zoom_level: Optional. The default value is 0. The default zoom level ranges from 0 to 100. Long_offset: Optional. The default value is PI/360. The longitude value traversed by each pixel when mouse/touch moves. Lat_offset: Optional. The default value is PI/180. The latitude value of each pixel when mouse/touch moves. Time_anim: Optional. The default value is 2000. The panorama is automatically animated after time_anim milliseconds. (Set to false to disable it.) TheTA_offset: Obsolete option, optional, default is 1440, horizontal speed when automatically animating. Anim_speed: optional. The default value is 2 RPM, the speed of the animation, how many radians per second/minute/degrees/revolutions. Navbar: Optional value, false by default. Displays the navigation bar. Navbar_style: Optional value. The default value is {}. Custom styles for the navigation bar. BackgroundColor: the backgroundColor of the navigation bar. The default value is rgba(61, 61, 61, 0.5). ButtonsColor: Foreground color of the button. The default value is transparent. ActiveButtonsBackgroundColor: the background color of the button is activated, the default value is rgba (255, 255, 255, 0.1). ButtonsHeight: The height of the button, in pixels. Default is 20. AutorotateThickness: The thickness of an Autorotate icon, in pixels. The default value is 1. ZoomRangeWidth: Zoom range in units, default 50. ZoomRangeThickness: thickness of the scale range, in pixels, default value 1. ZoomRangeDisk: Disk diameter of the zoom range, in pixels. Default is 7. FullscreenRatio: Ratio of full-screen ICONS. The default value is 3/4. FullscreenThickness: the thickness of a full-screen icon in pixels. The default value is 2. Loading_msg: Optional. The default value is Loading… , prompt text for image loading. Loading_img: Optional. The default value is null. The path of the image to be displayed at load time. Size: Optional, default null, final size of panorama container. For example: {width: 500, height: 300} Onready: Optional value. The default value is null. The callback function when the panorama is ready and the first image is displayed.

AddAction () : Adds an event (the plug-in does not provide a method to execute the event, but seems to provide it for internal use). FitToContainer () : Adjusts the panorama container size to the specified size. GetPosition () : Gets the latitude and longitude of the coordinates. GetPositionInDegrees () : Gets the latitude and longitude degree. GetZoomLevel () : Gets the zoom level. Load () : Loads the panorama (). MoveTo (longitude, latitude) : moveTo a certain point based on longitude and latitude. Rotate (dlong, DLAT) : Moves to a point based on the longitude and latitude. ToggleAutorotate () : Whether to enable automatic panorama rotation. ToggleDeviceOrientation () : Whether to enable gravity sensing orientation control. ToggleFullscreen () : Whether to enable full screen panorama. ToggleStereo () : Whether to enable stereo effects (available on WebVR). Zoom (level) : Sets the zoom level. ZoomIn () : zoomIn. ZoomOut () : Zooming out.

The code annotation in the project has been relatively comprehensive and the function of panorama is basically ended here. This project has twelve pictures, which has realized the main function of jump forward and backward in the market. Modal box-like features have not been added. If you have the implementation later, you can tell me that I also want to learn it. In addition, my QQ1029218856 code is partially repetitive and has not been encapsulated. CSDN download links: download.csdn.net/download/qq… Download from github: github.com/skillyu/vr-