Three.js 플러그인을 기반으로 360도 파노라마 생성

이 플러그인은 three.js를 기반으로 합니다. 미리보기 주소: 여기를 클릭하세요

사용법:

1. 이 플러그인의 사용법은 매우 간단합니다. 다음을 소개합니다. 2 js

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

2. 초기화(구체적인 매개변수 구성은 상황에 따라 다름)

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

구성 매개변수

다음은 모두 사용 가능한 구성 매개변수입니다. 파노라마 플러그인:

panorama: 필수 매개변수, 파노라마 경로.
컨테이너: 필수 매개변수, 파노라마가 배치되는 div 요소입니다.
autoload: 선택 사항, 기본값은 true입니다. true는 파노라마를 자동으로 호출하는 것을 의미하고, false는 나중에 파노라마를 로드하는 것을 의미합니다(.load() 메서드를 통해).
usexmpdata: 선택 사항, 기본값은 true이고 Photo Sphere 뷰어가 XMP 데이터를 읽어야 하는 경우 true입니다.
default_position: 선택 사항. 기본값은 {}이며, 기본 위치와 사용자가 보는 첫 번째 지점을 정의합니다(예: {long: Math.PI, lat: Math.PI/2}).
min_fov: 선택 사항, 기본값은 30, 최소 관측 영역, 단위 각도, 1~179입니다.
max_fov: 선택 사항, 기본값은 90이며, 최대 관측 영역(1~179도)입니다.
allow_user_interactions: 선택 사항, 기본값은 true입니다. false로 설정하면 사용자가 파노라마와 상호 작용할 수 없습니다(탐색 모음을 사용할 수 없음).
tilt_up_max: 선택 사항. 기본값은 라디안 단위의 위쪽 기울기 최대 각도인 Math.PI/2입니다.
tilt_down_max: 선택 사항. 기본값은 라디안 단위의 하향 기울기 최대 각도인 Math.PI/2입니다.
zoom_level: 선택 사항, 기본값은 0, 기본 확대/축소 수준, 값은 0-100입니다.
long_offset: 선택 사항, 기본값은 마우스/터치가 움직일 때 각 픽셀의 경도 값인 PI/360입니다.
lat_offset: 선택사항, 기본값은 PI/180, 즉 마우스/터치가 움직일 때 각 픽셀의 위도 값입니다.
time_anim: 선택 사항, 기본값은 2000입니다. 파노라마는 time_anim 밀리초 후에 자동으로 애니메이션됩니다. (비활성화하려면 false로 설정)
theta_offset: 더 이상 사용되지 않는 옵션, 선택 사항, 기본값은 1440, 자동 애니메이션 시 수평 속도입니다.
anim_speed: 선택 사항, 기본값은 2rpm, 애니메이션 속도, 초당/분당 라디안/도/회전 수입니다.
navbar: 선택사항 값, 기본값은 false입니다. 탐색 표시줄을 표시합니다.
navbar_style: 선택적 값, 기본값은 {}입니다. 탐색 모음의 사용자 정의 스타일입니다. 다음은 사용 가능한 스타일 목록입니다.
backgroundColor: 탐색 모음의 배경색, 기본값은 rgba(61, 61, 61, 0.5)입니다.
buttonsColor: 버튼의 전경색이며 기본값은 투명입니다.
activeButtonsBackgroundColor: 버튼 활성화 상태의 배경색입니다. 기본값은 rgba(255, 255, 255, 0.1)입니다.
buttonsHeight: 버튼 높이(픽셀 단위), 기본값은 20입니다.
autorotateThickness: 자동 회전 아이콘의 두께(픽셀)입니다. 기본값은 1입니다.
zoomRangeWidth: 줌 범위, 단위 표시, 기본값은 50입니다.
zoomRangeThickness: 확대/축소 범위의 두께, 단위 픽셀, 기본값 1.
zoomRangeDisk: 확대/축소 범위의 디스크 직경(픽셀 단위), 기본값은 7입니다.
fullscreenRatio: 전체 화면 아이콘의 비율, 기본값은 3/4입니다.
fullscreenThickness: 전체 화면 아이콘의 두께(픽셀)입니다. 기본값은 2입니다.
loading_msg: 선택 사항, 기본값은 Loading...이며, 이미지가 로드될 때 프롬프트 텍스트입니다.
loading_img: 선택 사항, 기본값은 로드 시 표시되는 이미지 경로인 null입니다.
크기: 선택 사항, 기본값은 파노라마 컨테이너의 최종 크기인 null입니다. 예: {너비: 500, 높이: 300}.
onready: 선택적 값, 기본값은 null입니다. 파노라마가 준비되고 첫 번째 이미지가 표시될 때의 콜백 함수입니다.

3. 위의 데모 코드

<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
}
});
}