3차원 하늘 공간 만드는 방법 – Three.js 강좌

이번에는 3차원 하늘 공간을 만들어볼게요. 어떤 원리로 만드는지, 배열과 반복문을 활용해서 어떻게 만드는지 자세히 배워볼게요.

*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.

Three.js에서 3차원 공간 만드는 방법

어린 시절에 정육면체 많이 만들어봤죠? 그것처럼 각 면에 이어지도록 이미지를 붙여넣고, three.js에서 정육면체를 만들어 그 안에 이미지를 넣으면 됩니다. 그리고 정육면체를 엄청 확대한 후 카메라를 그 안에 두면 됩니다.

카메라 설정

마지막 값을 크게 잡았습니다. 풍경으로 사용할거라서.. 너무 작게 적용하면 카메라에 다 안담기겠죠.

// 카메라 추가
const camera = new THREE.PerspectiveCamera(
  50,
  window.innerWidth / window.innerHeight,
  1,
  4000
)
camera.position.set(0, 20, 100)
camera.lookAt(0, 0, 0)

02. AxeHelper 추가

Scene 가운데 x,y,z 방향 표시를 할 수 있는 코드를 추가해줄게요. 다 완성되면 지울게요.

scene.add(new THREE.AxesHelper(5))

03. 컨트롤 설정

OrbitControls에 minDistance와 maxDistance도 조절해볼게요.

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true
controls.minDistance = 100
controls.maxDistance = 800
controls.update()

04. Array에 텍스처 질감 추가하기

아래 링크를 통해 스카이 박스에 해당하는 이미지를 다운받아 줍니다.

https://opengameart.org/content/skiingpenguins-skybox-pack

let materialArray = []
let texture_ft = new THREE.TextureLoader().load('../static/ex-14/bay_ft.jpg')
let texture_bk = new THREE.TextureLoader().load('../static/ex-14/bay_bk.jpg')
let texture_up = new THREE.TextureLoader().load('../static/ex-14/bay_up.jpg')
let texture_dn = new THREE.TextureLoader().load('../static/ex-14/bay_dn.jpg')
let texture_rt = new THREE.TextureLoader().load('../static/ex-14/bay_rt.jpg')
let texture_lf = new THREE.TextureLoader().load('../static/ex-14/bay_lf.jpg')

materialArray.push(
  new THREE.MeshBasicMaterial({
    map: texture_ft,
  })
)
materialArray.push(
  new THREE.MeshBasicMaterial({
    map: texture_bk,
  })
)
materialArray.push(
  new THREE.MeshBasicMaterial({
    map: texture_up,
  })
)
materialArray.push(
  new THREE.MeshBasicMaterial({
    map: texture_dn,
  })
)
materialArray.push(
  new THREE.MeshBasicMaterial({
    map: texture_rt,
  })
)
materialArray.push(
  new THREE.MeshBasicMaterial({
    map: texture_lf,
  })
)

05. 반복문으로 질감 배열 추가하기

 // 반복문
  for (let i = 0; i < 6; i++) {
    skyMaterialArray[i].side = THREE.BackSide
  }

Side값 THREE.BackSide로 변경

three.js에는 Side 개념이 있습니다. 기본값은 FrontSide라서 도형 바깥면에 질감을 표현할 수 있습니다. 안쪽에 질감을 표현하려면 BackSide로 속성을 변경해야 합니다. 만약 양쪽면에 다 노출하고 싶다면 DoubleSide로 해주면됩니다.

const sky = new THREE.Mesh(skyGeometry, skyMaterialArray)

이렇게 마무리를 지어보면 Three.js로 3차원 공간 만들기 완성입니다.