삶/생활정보공유
360사진 html 파일로 보는 방법
dooley
2023. 10. 10. 14:23
반응형
<사진 html 파일 생성>
1. 무료 html 이미지 파일 생성 사이트 활용
무료 이미지 호스팅 / 이미지 업로드
이미지를 업로드 하고공유해보세요. 원하는 곳 어디든 끌어놓기로 이미지를 바로 업로드해보세요.(이미지당 32 MB 가능) 다이렉트 링크, BBCode 및 HTML 미리보기등을 제공해드립니다.
imgbb.com
2. 360도 사진 업로드
3. html 생성
이미지 자동삭제 기간 설정 후 업로드 클릭
퍼가기에서 'HTML 원본 이미지 링크'로 보기
이중에서 파랑색으로 표기되어 있는 부분 발췌
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A simple example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
<style>
#panorama {
width: 600px;
height:400px;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script>
pannellum.viewer('panorama', {
"type": "equirectangular",
"panorama": "https://i.ibb.co/pWz7qW0/IMG-20230818-103403-00-056-Pure-Shot.jpg",
"autoLoad": true
});
</script>
</body>
</html>
빨강색으로 표기되어 있는 부분에 붙여넣기 하여 사용하기
메모장으로 저장한 다음 '파일 > 다른이름으로 저장' 후 파일이름 .html 확장자로 작성하고 파일형식은 '모든 문서'로 저장
반응형