node js panolens.js 360이미지

panolens

 

pchen66.github.io/Panolens/#Home

Panolens.js

github.com/pchen66/panolens.js

pchen66/panolens.js

threejs.org/

Three.js – JavaScript 3D library

 

360 이미지 or 큐브 맵을 웹에 띄어주는 모듈

 

기본적으로 필요한 스크립트 2가지

1. panolens.min.js 

2. three.min.js (webgl)

 

<script src="js/three.min.js"></script>
<script src="js/panolens.min.js"></script>

 

 viewer_main = new PANOLENS.Viewer({ 
 	enableReticle: false, 
    output: 'console', 
    viewIndicator: true, 
    autoRotate: false, 
    autoRotateSpeed: 2, 
    autoRotateActivationDuration: 5000, 
    dwellTime: 1000, 
    autoHideInfospot: false // 마커 토클
});

panorama_main_image1 = new PANOLENS.ImagePanorama( '360이미지 경로' );
    panorama_main_image1.setLinkingImage( '마커 이미지 경로' );
    panorama_main_image1.addEventListener( 'progress',function(e){
    console.log(e.progress);
});

   panorama_main_image2 = new PANOLENS.ImagePanorama( '360이미지 경로' );
    panorama_main_image2.setLinkingImage( '마커 이미지 경로' );
    panorama_main_image2.addEventListener( 'progress',function(e){
    console.log(e.progress);
});

//마커 좌표 생성
panorama_main_image1.link( panorama_main_image2, new THREE.Vector3( -4894.52, -136.82, -981.37 ) );
panorama_main_image2.link( panorama_main_image1, new THREE.Vector3( 1119.54, -371.69, -4854.21 ) );
    
panorama_main_image1.link( panorama_main_video, new THREE.Vector3( -4568.76, -78.62, 2022.38 ) );
panorama_main_video.link( panorama_main_image1, new THREE.Vector3( -2358.58, 1205.94, -3626.21 ) );

 

panolens.js 에서 기본적으로 ctrl + 마우스 이동하면 console.log(vector3) 값을 표출해준다

 

 

실행화면