Create 360-degree panorama based on Three.js plug-in

This is a plug-in based on three.js, preview address: click here

Usage:

1. The usage of this plug-in is very simple, introduce the following 2 js

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

2. Initialize it, (specific configuration of various parameters Depends on the situation)

var PSV = new PhotoSphereViewer({
// 全景图的完整路径
panorama: 'images/360img03.jpg',
// 放全景图的元素
container: div
})

Configuration parameters

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

panorama: required parameter, the path of the panorama.
container: required parameter, the div element where the panorama is placed.
autoload: Optional, the default value is true, true means automatically calling the panorama, false means loading the panorama later (through the .load() method).
usexmpdata: optional, default value is true, true if Photo Sphere Viewer must read in XMP data.
default_position: Optional, the default value is {}, which defines the default position and the first point seen by the user, for example: {long: Math.PI, lat: Math.PI/2}.
min_fov: Optional, the default value is 30, the minimum area of ​​observation, unit degrees, between 1-179.
max_fov: Optional, the default value is 90, the maximum area of ​​observation, in degrees, between 1-179.
allow_user_interactions: Optional, the default value is true, setting it to false disables users from interacting with the panorama (the navigation bar is unavailable).
tilt_up_max: Optional, the default value is Math.PI/2, the maximum angle of upward tilt, in radians.
tilt_down_max: Optional, the default value is Math.PI/2, the maximum angle of downward tilt, in radians.
zoom_level: Optional, the default value is 0, the default zoom level, the value is between 0-100.
long_offset: Optional, the default value is PI/360, the longitude value passed by each pixel when the mouse/touch moves.
lat_offset: Optional, the default value is PI/180, the latitude value of each pixel when the mouse/touch moves.
time_anim: Optional, the default value is 2000, the panorama will automatically animate after time_anim milliseconds. (Set to false to disable it)
theta_offset: Obsolete option, optional, default value is 1440, horizontal speed when automatically animating.
anim_speed: Optional, the default value is 2rpm, the speed of animation, how many radians/degrees/revolutions per second/minute.
navbar: Optional value, default is false. Show navigation bar.
navbar_style: optional value, default is {}. Custom style for navigation bar. The following is a list of available styles:
backgroundColor: the background color of the navigation bar, the default value is rgba(61, 61, 61, 0.5).
buttonsColor: The foreground color of buttons, the default value is transparent.
activeButtonsBackgroundColor: The background color of the button activation state, 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: Zoom range, unit display, default value 50.
zoomRangeThickness: The thickness of the zoom range, unit pixel, default value 1.
zoomRangeDisk: The disk diameter of the zoom range, in pixels, the default value is 7.
fullscreenRatio: The ratio 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 displayed when loading.
size: optional, default value is null, the final size of the panorama container. For example: {width: 500, height: 300}.
onready: optional value, default value is null. Callback function when the panorama is ready and the first image is displayed.

3. The code of the demo above

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






旋转查看效果




*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
text-decoration: none;
border: 0;
outline: 0;
}
.main{
max-width: 640px;
width: 100%;
margin: 0 auto;
}
.main h3{
text-align: center;
padding: 10px 0;
}
/**
* Created by Administrator on 2016/11/29.
*/
//必须在服务器上才能看到效果！
window.onload=function(){
getTitleHeight();
loadingAllImg();
}
//让全景图刚好撑满屏幕
var canvasHeight;
function getTitleHeight(){
var title=document.getElementById('title');
var titleHeight=parseFloat(getComputedStyle(title).height);
var maxHeight=window.innerHeight;
canvasHeight=parseFloat(maxHeight-titleHeight)+'px';
}
//全景图参数配置函数
function loadingAllImg(){
var div = document.getElementById('container');
var PSV = new PhotoSphereViewer({
// 全景图的完整路径
panorama: 'images/360img03.jpg',
// 放全景图的元素
container: div,
// 可选，默认值为2000，全景图在time_anim毫秒后会自动进行动画。（设置为false禁用它）
time_anim: false,
// 可选值，默认为false。显示导航条。
navbar: true,
// 可选，默认值null，全景图容器的最终尺寸。例如：{width: 500, height: 300}。
size: {
width: '100%',
height: canvasHeight
}
});
}