three.js skybox 적용하기 [Threejs Cloth Tailor 개발일지]

↓  ↓  이전 포스팅 보러가기 ↓  ↓ 

https://like-grapejuice.tistory.com/526

 

raycast 관련 문제도 고쳤겠다. 이제 기록을 남길 시나리오를 짜보자.

우선 색부터 좀 조정하도록 하자. 

배경색 변경 

우선 템플릿에서부터 사용했던 저 칙칙한 배경색 좀 바꾸자.

 

재밌는 점은 배경은 css로 구성되어있다는 점이다. 

배경을 skybox로 붙이고 싶은데, style.css 위에 덧붙이면 그냥 적용이 되려나.

three.js skybox 구현 

https://threejs.org/docs/#api/en/loaders/CubeTextureLoader

three.js docs

cube texture loader를 이용해서 

scene에 background로 texture를 적용하여 skybox 를 구현할 것이다.

 

이렇게 옷가게 skybox image를 적용하면 

 

skybox가 잘 적용되었다.

 

몇 가지 이미지를 더 넣어놓고, GUI로 변경할 수 있게 설정해놓자.

 

export function changeEnvironment(scene: Scene){
  const environmentsFolder = gui.addFolder('environments')

  environmentsFolder.add({environments: skyboxType[0]}, 'environments', skyboxType).onChange((val: SKYBOX)=>{
    changeSkyBox(scene, val)
  })
}

import * as THREE from "three";

const skyboxPath = '../../public/skybox/'
export type SKYBOX = 'clothing-store1' | 'clothing-store2' | 'clothing-store3' | 'tailor-shop'
export const skyboxType: SKYBOX[] = [    
  'clothing-store1',
  'clothing-store2',
  'clothing-store3',
  'tailor-shop',
]
// export let skyboxType: SKYBOX = 'clothing-store1'

export function initSkyBox(scene: THREE.Scene){
  const textureLoader = new THREE.CubeTextureLoader()
  textureLoader.load(
    [
      `${skyboxPath+skyboxType[0]}/0.png`, // 앞면
      `${skyboxPath+skyboxType[0]}/1.png`, // 뒷면
      `${skyboxPath+skyboxType[0]}/2.png`, // 위
      `${skyboxPath+skyboxType[0]}/3.png`, // 아래
      `${skyboxPath+skyboxType[0]}/4.png`, // 오른쪽
      `${skyboxPath+skyboxType[0]}/5.png`, // 왼쪽
    ],
    (texture)=>{
      scene.background = texture;
    }
  )
}

export function changeSkyBox(scene: THREE.Scene, type: SKYBOX){
  const textureLoader = new THREE.CubeTextureLoader()
  textureLoader.load(
    [
      `${skyboxPath+type}/0.png`, // 앞면
      `${skyboxPath+type}/1.png`, // 뒷면
      `${skyboxPath+type}/2.png`, // 위
      `${skyboxPath+type}/3.png`, // 아래
      `${skyboxPath+type}/4.png`, // 오른쪽
      `${skyboxPath+type}/5.png`, // 왼쪽
    ],
    (texture)=>{
      scene.background = texture;
    }
  )
}

gui로 skybox를 선택해서 변경할 수 있게 구현하였다.