[WebGL][three.js][웹 기반 3D게임 개발 연구 (사이드 프로젝트)] Skybox 만들기 예제 샘플

Skybox는 3D게임 개발에서 3D게임 배경 스테이지를 만드는 데 많이 쓰는 방식입니다. 정육면체 오브젝트에 같은 배경이미지 6장을 정육면체 내부로 맵핑해서 붙이고 렌더링해서 보여주는데 있다. 

Skybox 만들기 예제 샘플

import * os THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

import { WEBGL } from './webgl'

if (WEBGL.isWebGLAvailable()) {
  // 장면 추가
  const scene = new THREE.Scene()
  scene.background = new THREE.Color(0xeeeeee)
  
  //카메라 추가
  const camera = new THREE.PerspectiveCamera(
   50,
    window.innerWidth / window.innerHeight,
    1,
    4000
  )
  camera.position.set(0, 20, 100)
  camera.lookAt(0,0,0)
  
  // 렌더러 추가
  const renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialas: true,
  })
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)
  
  // 카메라 이후에 등장필요
  const controls = new OrbitControls(camera, renderer.domElement)
  controls.enableDamping = true
  controls.minDistance = 20 // 카메라 줌인 제한
  controls.maxDistance = 800 // 카메라 줌아웃 제한
  controls.update()
  
  // Skybox 이미지 배열
  const skyMaterialArray = []
  const texture_ft = new THREE.TextureLoader().load('../images/_ft.jpg')
  const texture_bk = new THREE.TextureLoader().load('../images/_bk.jpg')
  const texture_up = new THREE.TextureLoader().load('../images/_up.jpg')
  const texture_dn = new THREE.TextureLoader().load('../images/_dn.jpg')
  const texture_rt = new THREE.TextureLoader().load('../images/_rt.jpg')
  const texture_lf = new THREE.TextureLoader().load('../images/_lf.jpg')
  
  // 이미지 텍스처를 배열에 각각 집어넣음
  skyMaterialArray.push(
  new THREE.MeshStandardMaterial({
    map: texture_ft,  
  })
  )
  
   skyMaterialArray.push(
  new THREE.MeshStandardMaterial({
    map: texture_bk,  
  })
  
  )
   skyMaterialArray.push(
  new THREE.MeshStandardMaterial({
    map: texture_up,  
  })
  )
  
   skyMaterialArray.push(
  new THREE.MeshStandardMaterial({
    map: texture_dn,  
  })
  )
  
   skyMaterialArray.push(
  new THREE.MeshStandardMaterial({
    map: texture_rt,  
  })
  )
  
   skyMaterialArray.push(
  new THREE.MeshStandardMaterial({
    map: texture_lf,  
  })
  )
  
  // 이미지 반복 적용 (Backside)
  for (let i = 0; i < 6; i++){
    skyMaterialArray[i].side = THREE.BackSide
  }
  
  // 메쉬 추가
  const skyGeometry = new THREE.BoxGeometry(2400,2400,2400)
  //const skyMaterial = new THREE.MeshStandardMaterial({
  //  color: 0x333333,
   // map: texture,
 // })
  // skyMaterial.side = THREE.BackSide
  const sky = new THREE.Mesh(skyGeometry, skyMaterialArray)
  scene.add(sky)
  
  // 빛
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.8)
  scene.add(ambientLight)
  
  function animate(){
    requestAnimationFrame(animate) // 인자로 받은 함수 animate를 반복 실행
    renderer.render(scene, camera)
  }
  animate()
  
  // 반응형처리

}

/* 렌더러
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  
  document.body.appendChild(renderer.domElement);
  
  renderer.render(scene, camera);
  
  } else {
    var warning = WEBGL.getWebGLErrorMessage();
    document.body.appendChild(warning);
}
*/

* (주의) 여기 예제나 글들은 게임개발에 도움이 되는 정보 보다는 개인 공부을 위한 것이니 옳은 방법이 아닐 수 있으니 참고바랍니다.