Three.js 10일차 (안개 효과)

 

 

---

1. 색상 변수 등록

---

 

const FogColor = 0x004fff
const objColor = 0xffffff
const FloorColor = 0x555555

이렇게 색상 변수를 등록하고, color를 적용할 곳에다가 변수만 넣어주면 끝이다.

이렇게 변수를 활용하면 나중에 일일이 오브젝트마다 color를 바꿔주지 않아도 된다.

 

배경 색상을 변경해보자

const scene = new THREE.Scene()
scene.background = new THREE.Color(FloorColor)

 

 

아래는 전체 코드이다.

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

import { WEBGL } from './webgl'

if (WEBGL.isWebGLAvailable()) {
  const FogColor = 0x004fff
  const objColor = 0xffffff
  const FloorColor = 0x555555

  // 장면 추가
  const scene = new THREE.Scene()
  scene.background = new THREE.Color(FloorColor)


  // 카메라 추가
  const camera = new THREE.PerspectiveCamera(
    80,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  )
  camera.position.set(0, 1, 2)
  camera.lookAt(0, 0, 0)

  // 렌더러 추가
  const renderer = new THREE.WebGLRenderer({
    alpha: true,
    antialias: true,
  })
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)

  // 카메라 이후에 등장필요
  const controls = new OrbitControls(camera, renderer.domElement)
  controls.minDistance = 3 // 마우스 휠로 카메라 거리 조작시 최소 값. 기본값(Float)은 0 입니다.
  controls.maxDistance = 6 // 마우스 휠로 카메라 거리 조작시 최대 값. 기본값(Float)은 무제한 입니다.
  controls.maxPolarAngle = Math.PI / 2 - 0.1 // 각도 제한
  controls.enableDamping = true //마우스 우클릭으로 카메라 위치 변경

  // 컨트롤 업데이트
  controls.update()

  // 도형 추가
  const geometry = new THREE.TorusGeometry(0.7, 0.3, 12, 80)
  const material = new THREE.MeshStandardMaterial({
    color: objColor,
  })
  const obj = new THREE.Mesh(geometry, material)
  obj.position.y = 0.5
  obj.position.z = 0
  scene.add(obj)

  //바닥 추가
  const planeGeometry = new THREE.PlaneGeometry(30, 30, 1, 1)
  const planeMaterial = new THREE.MeshStandardMaterial({
    color: FloorColor,
  })
  const plane = new THREE.Mesh(planeGeometry, planeMaterial)
  plane.rotation.x = -0.5 * Math.PI
  plane.position.y = -0.5
  scene.add(plane)

  // 빛 추가
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
  directionalLight.position.set(1, 1, 1)
  scene.add(directionalLight)

  function animate() {
    requestAnimationFrame(animate)
    obj.rotation.y += 0.01
    renderer.render(scene, camera)
  }
  animate()

  // 반응형 처리
  function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }

  window.addEventListener('resize', onWindowResize)
} else {
  var warning = WEBGL.getWebGLErrorMessage()
  document.body.appendChild(warning)
}

 

 

 

---

2. 안개 적용

---

 

scene.fog = new THREE.Fog(FogColor, 1, 8)

파라미터는 순차적으로 색깔, 가까운거리, 먼거리이다.

거리는 도형의 rotation.z의 거리와 같다. z가 8이상의 값을 가지면 안개 속에 가려진다.

 

 

카메라를 이동하면 안개에 영향을 받는 것처럼 보인다.

 

 

이처럼 도형과 카메라의 거리에 따라 안개 효과 정도가 달라진다.

 

 

const scene = new THREE.Scene()
scene.background = new THREE.Color(FogColor)
scene.fog = new THREE.Fog(FogColor, 1, 8)

scene의 background 색상도 FogColor로 바꿔주면 안개 효과를 강하게 줄 수 있다.

 

 

 

 

---

3. FogExp2

---

Fog처럼 안개효과를 주는 친구이다.

scene.fog = new THREE.FogExp2(FogColor, 0.5)

다른 점은 파라미터로 색상과 density(밀집도)를 넣어준다는 것이다.

밀도값이 최대 1이여서 1이면 아예 안개에 가려져서 오브젝트가 안보인다.

 

 

 

fog는 안개의 위치를 선택할 수 있는 장점이 있어서 더 많이 쓰인다.

FogExp2는 카메라와의 거리에 따라서 기하급수적으로 안개효과를 증가하는 방식이다. 그래서 fog보다는 좀 더 현실에 가까운 표현을 한다.