Three.js와 Panolens에서 360 파노라마를 만드는 방법
소개
안녕하세요 streampack 팀의 메디입니다.
htps : // c ぉ う ぱ ck. jp / 세 r ゔ ぃ 세 / 오 치온 / st 레아 mpa ck. HTML
Copyrights·카피라이트
Copyleft 사진 h tps : // Pipeba y. 이 m / p 허리 s / 와우 r 파노라마
Objective·목적
Learning how to create a 360 panorama with info markers.
툴팁이있는 360 파노라마의 간단한 예를 배우십시오.
도구 및 도구
- Panolens
- Threejs
구현 및 구현
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/105/three.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/build/panolens.min.js"></script>
<div id="container"></div>
<script>
var panorama, viewer, container, infospot, infospot2;
container = document.querySelector('#container');
panorama = new PANOLENS.ImagePanorama('https://i.imgur.com/wTCPouq.jpg');
infospot = new PANOLENS.Infospot();
infospot.position.set( 1000, 100, -2000 );
infospot.addHoverText( '千葉県' );
infospot2 = new PANOLENS.Infospot();
infospot2.position.set( 1000, 100, 2000 );
infospot2.addHoverText( '神奈川県' );
panorama.add(infospot , infospot2);
viewer = new PANOLENS.Viewer({
container: container
});
viewer.add(panorama);
</script>
</body>
</html>
데모 & 데모
정보원
htps : // 기주 b. 이 m/mr도 오 b/th 네. js/
htps // p 66. 기주 b. 이오 / 파노 펜 s /
Reference
이 문제에 관하여(Three.js와 Panolens에서 360 파노라마를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mehdi/items/a3d29cd0729c55c016b6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
