Create a 360-degree panorama based on the Three. js plug-in and a three. js Panorama

Create a 360-degree panorama based on the Three. js plug-in and a three. js Panorama

This is a three. js-based plug-in. Preview address: click here

Usage:

1. This plug-in is easy to use. The following two js

<script src="js/three.min.js"></script><script src="js/photo-sphere-viewer.min.js"></script>

2. initialize it. (The specific parameter configuration depends on the situation)

Var PSV = new PhotoSphereViewer ({// full panorama path panorama: 'images/360img03.jpg ', // container: div })

Configuration parameters

The following are all available configuration parameters for the panorama plug-in:

Panorama: the path of the panorama. this parameter is required.
Container: A required parameter to place the div element of the panorama.
Autoload: Optional. The default value is true. If it is true, the panorama is automatically called. If it is false, the panorama is loaded after it (by using the. load () method ).
Usexmpdata: Optional. The default value is true. If Photo Sphere Viewer must read XMP data, the value is true.
Default_position: Optional. The default value is {}. It defines the default position and the first point you see, for example, {long: Math. PI, lat: Math. PI/2 }.
Min_fov: Optional. The default value is 30. It is the smallest area observed. The unit is degrees, between 1 and 179.
Max_fov: Optional. The default value is 90. The maximum observed area, in the unit of degrees, is between 1 and 179.
Allow_user_interactions: Optional. The default value is true. If it is set to false, the interaction between the user and the panorama is prohibited (the navigation bar is unavailable ).
Tilt_up_max: Optional. The default value is Math. PI/2. The maximum angle in radians.
Tilt_down_max: Optional. The default value is Math. PI/2. It is the maximum angle in radians.
Zoom_level: Optional. The default value is 0. The default zoom level is between 0 and.
Long_offset: Optional. The default value is PI/360. the longitude of each pixel when the mouse or touch moves.
Lat_offset: Optional. The default value is PI/180. The latitude value of each pixel when the mouse or 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: Specifies an out-of-date option. Optional. The default value is 1440. It indicates the horizontal speed during Automatic animation.
Anim_speed: Optional. Default Value: 2 rpm. animation speed. The number of radians/degrees/revolutions per second/minute.
Navbar: Optional. The default value is false. Display navigation bar.
Navbar_style: optional value. The default value is {}. The custom style of the navigation bar. The following is a list of available styles:
BackgroundColor: Specifies the background color of the navigation bar. The default value is rgba (61, 61, 61, 0.5 ).
ButtonsColor: the foreground color of the button. The default value is transparent.
ActiveButtonsBackgroundColor: the background color of the button activation status. The default value is rgba (255,255,255, 0.1 ).
ButtonsHeight: the height of the button, in pixels. The default value is 20.
AutorotateThickness: The thickness of the autorotate icon, in pixels. The default value is 1.
ZoomRangeWidth: the zoom range. The unit is displayed. The default value is 50.
ZoomRangeThickness: The thickness of the scaling range, in pixels. The default value is 1.
ZoomRangeDisk: the disc diameter in pixels in the scaling range. The default value is 7.
FullscreenRatio: percentage of full screen icons. The default value is 3/4.
FullscreenThickness: The thickness of the full screen icon, in pixels. The default value is 2.
Loading_msg: Optional. The default value is Loading ..., The prompt text when the image is loaded.
Loading_img: Optional. The default value is null. The path of the image to be loaded.
Size: Optional. The default value is null. The final size of the panorama container. For example: {width: 500, height: 300 }.
Onready: Optional. The default value is null. Callback function when the panorama is ready and the first image is displayed.

3. The demo code above

<! DOCTYPE html> 
At the same time, you can search for (Photo Sphere Viewer) on github! Currently, this plug-in is not perfect.
The above is a 360-degree panorama of Three. js introduced by the small editor. I hope it will be helpful to you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!