스카이박스(skybox) 배경 설치하기

r111

3차원 공간을 구성하면서
여러 오브젝트들로 주변을 꾸미기도 하지만
멀리있는 하늘 같은 배경도 필요합니다.
그러한 배경을 스카이박스(skybox) 라고 합니다.

스카이박스는 6장의 연결된 사진으로 이루어집니다.

위와같은 연결된 6장의 사진을 각 면으로 하는 아주 커다란 육면체로,
만들고있는 3차원 공간을 덮는 개념입니다.

THREE.js 에서는
CubeTextureLoader()를 이용하여
Scene.background 로 쉽게 스카이박스를 설치할수 있습니다.

장면.background = new THREE.CubeTextureLoader()
.setPath( 'textures/cubeMaps/' ) // 이미지파일들 경로
.load( [
  'px.png', //우
  'nx.png', //좌
  'py.png', //위
  'ny.png', //아래
  'pz.png', //뒤
  'nz.png'  //앞
] );

배경이미지를 순서에 맞게 넣어줘야 하며,
THREE.js 에서 좌표와 관련된 모든 순서는 X,Y,Z 의 순서대로 작업합니다.

See the Pen skybox by Ricon Kim (@vitneum) on CodePen.

 

 

[무료 스카이박스 이미지를 제공해주는 사이트]

http://www.custommapmakers.org/skyboxes.php

Skyboxes for download