Panolens.js로 간단하게 전경 만들기
4595 단어 panoramaJavaScript
개요
Panolens.js이라는 프레임을 이용하여 간단하게 전경도를 제작한다.
Panolens.js 소개
Panolens.js는 전경을 제작할 수 있는 프레임입니다.Three.js를 기반으로 제작된 것 같아요.
창설
HTML, CSS, JS는 향후 다양한 기능을 추가해 별도의 파일로 분할할 예정이다.
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel=stylesheet href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/panolens.min.js"></script>
</head>
<body>
<div id="container"></div>
<script src="panorama.js"></script>
</body>
</html>
style.csshtml, body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#container {
width: 100%;
height: 100%;
}
panorama.jsvar container, panorama, viewer;
container = document.querySelector('#container');
panorama = new PANOLENS.ImagePanorama('https://i.imgur.com/wTCPouq.jpg');
viewer = new PANOLENS.Viewer({container: container});
viewer.add(panorama);
결실
모든 파일을 편집한 후 index입니다.그것을 열면 이런 느낌으로 전경을 볼 수 있다.
마우스로 미끄러지면 전경도 회전한다.
참고 자료
https://qiita.com/mehdi/items/a3d29cd0729c55c016b6
https://i.imgur.com/(이미지)
Reference
이 문제에 관하여(Panolens.js로 간단하게 전경 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/BIKYO/items/cac288d8a62bac2c79a1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Panolens.js는 전경을 제작할 수 있는 프레임입니다.Three.js를 기반으로 제작된 것 같아요.
창설
HTML, CSS, JS는 향후 다양한 기능을 추가해 별도의 파일로 분할할 예정이다.
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel=stylesheet href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/panolens.min.js"></script>
</head>
<body>
<div id="container"></div>
<script src="panorama.js"></script>
</body>
</html>
style.csshtml, body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#container {
width: 100%;
height: 100%;
}
panorama.jsvar container, panorama, viewer;
container = document.querySelector('#container');
panorama = new PANOLENS.ImagePanorama('https://i.imgur.com/wTCPouq.jpg');
viewer = new PANOLENS.Viewer({container: container});
viewer.add(panorama);
결실
모든 파일을 편집한 후 index입니다.그것을 열면 이런 느낌으로 전경을 볼 수 있다.
마우스로 미끄러지면 전경도 회전한다.
참고 자료
https://qiita.com/mehdi/items/a3d29cd0729c55c016b6
https://i.imgur.com/(이미지)
Reference
이 문제에 관하여(Panolens.js로 간단하게 전경 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/BIKYO/items/cac288d8a62bac2c79a1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel=stylesheet href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/105/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/panolens.min.js"></script>
</head>
<body>
<div id="container"></div>
<script src="panorama.js"></script>
</body>
</html>
html, body {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#container {
width: 100%;
height: 100%;
}
var container, panorama, viewer;
container = document.querySelector('#container');
panorama = new PANOLENS.ImagePanorama('https://i.imgur.com/wTCPouq.jpg');
viewer = new PANOLENS.Viewer({container: container});
viewer.add(panorama);
모든 파일을 편집한 후 index입니다.그것을 열면 이런 느낌으로 전경을 볼 수 있다.
마우스로 미끄러지면 전경도 회전한다.
참고 자료
https://qiita.com/mehdi/items/a3d29cd0729c55c016b6
https://i.imgur.com/(이미지)
Reference
이 문제에 관하여(Panolens.js로 간단하게 전경 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/BIKYO/items/cac288d8a62bac2c79a1
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Panolens.js로 간단하게 전경 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/BIKYO/items/cac288d8a62bac2c79a1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
