모두의연구소 가상현실연구실 VRtooN에서 진행한 연구결과물입니다.

작성자 : 박민수 랩짱님



* Three.js Skybox

정육면체 큐브를 만들어 카메라를 그 안에 넣어두고 큐브 안쪽에 텍스처를 입히는 방식으로 스카이박스를 구현할 수 있다.

이를 위해 Three.js 에서는 다음과 같은 요소들을 사용한다.

- var loader = new TextureLoader() : 텍스처를 읽어들이기 위한 object 생성

- loader.load('경로/텍스처파일명‘, 콜백함수)

- 콜백함수에서는 텍스처를 설정하고, 박스 geometry material을 만들어 정육면체 메쉬를 생성하고, Scene 에 추가한다.

 


 

 

 

 

 

 

 

* 평면

평면 역시 스카이박스와 마찬가지의 구성방식을 가진다.

다만 메쉬의 형태가 평면이므로 PlaneGeometry를 이용해 메쉬를 구성한다.

기본 PlaneGeometry 의 방향이 x축과 y축을 포함하는 평면이기 때문에, 메쉬의 rotationx 축 기준으로 -90도 회전시켜주어야 하고, 스카이박스 크기 및 카메라의 near, far plane 위치를 고려해 범위 내에 들어오도록 위치를 정해주어야 한다.





모두의연구소 페이지와 커뮤니티 그룹에 오시면 더 많은 정보를 만나보실 수 있습니다.

모두의연구소 페이지 https://www.facebook.com/lab4all

모두의연구소 커뮤니티 그룹 : https://www.facebook.com/groups/modulabs


저작자 표시 비영리 변경 금지
신고
크리에이티브 커먼즈 라이선스
Creative Commons License

+ Recent posts