-
360도 구형 파노라마 사진을 6P 스카이박스로 변환하기웹프로그래밍/THREE.js 2020. 1. 7. 12:03반응형
r111
THREE.js로 구현할 3차원 공간의 배경은
6장의 사진으로 만든 스카이박스(SkyBox)로 만듭니다.
참고 : 스카이박스(SkyBox) 배경 설치하기스카이박스를 만드는 방법은 여러가지가 있겠지만,
먼저 360도 구형 파노라마 사진을 만든뒤 스카이박스로 변환하는 방법이
개인적으로는 간편한것 같습니다.360도 구형 파노라마를 스카이박스로 변환하는 또 여러가지 방법들 가운데
블렌더를 이용하는 한 방법을 소개합니다.
- 블렌더에 대한 소개나 사용방법은 이곳에서 다루지 않습니다.원문출처 : https://aerotwist.com/tutorials/create-your-own-environment-maps/
1. 우선 아래의 소스파일을 다운로드 받으세요.
2. 변환할 360도 구형 파노라마 파일 준비.
- 준비한 파일을 위 블렌더 파일과 같은폴더 안에 "environment.jpg" 이름으로 바꾸어 놓는다.
3. environment.blend 파일 실행.
- 각자의 환경설정에 따라 실행화면이 조금은 다를수 있습니다.
4. [렌더]탭의 [애니메이션] 버튼 클릭.
5. 변환작업 진행
- 위 4번항목 에서 [애니메이션]버튼을 클릭하면 6장의 이미지가 추출되어지는 과정이 보여지면서 자동 진행됩니다.
6. 작업이 끝나면 폴더에 아래 사진처럼 추출된 6장의 이미지가 만들어져 있습니다.
7. 만들어진 이미지의 각 방향은 아래와 같습니다.
'0002.png' -> 좌
'0004.png' -> 우
'0006.png' -> 위
'0005.png' -> 아래
'0003.png' -> 뒤
'0001.png' -> 앞[기타]
360도 구형 파노라마를 직접 촬영하는 방법과 앱 도 많이 있겠지만
직접 찍은 사진을 이어붙여서 파노라마 사진으로 만들어주는 프로그램도 많이 있습니다.
그중에 개인적으로 Hugin 이라는 오픈소스 프로그램을 추천 합니다.반응형'웹프로그래밍 > THREE.js' 카테고리의 다른 글
THREE.js Texture Animation (0) 2020.01.09 THREE.js 에서 음악/효과음 사용하기 - Audio (0) 2020.01.08 스카이박스(skybox) 배경 설치하기 (0) 2020.01.06 Light(빛, 광원) 의 종류 (0) 2020.01.05 Mesh 모델의 Material(재질) 종류 (0) 2020.01.04