Three.js 7일차 (빛)

 

 

---

1. 기본코드

---

import * as THREE from 'three'

import {
  WEBGL
} from './webgl'

if (WEBGL.isWebGLAvailable()) {

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

  // 카메라 추가
  const fov = 75;
  const aspect = window.innerWidth / window.innerHeight;
  const near = 0.1;
  const far = 1000;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

  camera.position.x = 0;
  camera.position.y = 0.1;
  camera.position.z = 1.8;
  camera.lookAt(new THREE.Vector3(0, 0, 0));


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

  // 도형 추가
  const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
  const material = new THREE.MeshStandardMaterial({
    color: 0xffffff
  });
  const cube = new THREE.Mesh(geometry, material);
  cube.rotation.y = 0.5;
  scene.add(cube);

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

  // 빛 추가

  // 전역으로 빛 비춰줌
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
  scene.add(ambientLight);

  // 특정 방향으로 빛 방출
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
  directionalLight.position.set(1, 1, 1);
  // scene.add(directionalLight);
  // const dlhelper = new THREE.DirectionalLightHelper(directionalLight, 0.5);
  // scene.add(dlhelper);

  // 하늘과 땅 컬러 지정
  const hemisphereLight = new THREE.HemisphereLight(0x004fff, 0xff0000, 1);
  // scene.add(hemisphereLight);

  // 한 방향으로 빛 방출 (예. 전구)
  const pointLight = new THREE.PointLight(0xffffff, 1);
  pointLight.position.set(1, 1, 1);
  // scene.add(pointLight);
  // const plhelper = new THREE.PointLightHelper(pointLight, 0.5);
  // scene.add(plhelper);

  // 직사각형 빛 방출
  const rectLight = new THREE.RectAreaLight(0xffffff, 2, 1, 1);
  rectLight.position.set(0.5, 0.5, 1);
  rectLight.lookAt(0, 0, 0);
  // scene.add(rectLight);

  // 직사각형 빛 방출
  const spotLight = new THREE.SpotLight(0xffffff, .5);
  spotLight.position.set(0.5, 0.5, 1);
  // scene.add(spotLight);
  // const slhelper = new THREE.SpotLightHelper(spotLight, 0.5);
  // scene.add(slhelper);


  function render(time) {
    renderer.render(scene, camera);
  }
  requestAnimationFrame(render);

  // 반응형 처리
  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. AmbientLight

---

모든 오브젝트를 대상으로 전역에서 빛을 비춘다.

// 전역으로 빛 비춰줌
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);

 

AmbientLight의 첫번째 파라미터는 색이며, 두번째 파라미터는 밝기이다.

0~1사이의 값을 줄 수 있다.

 

 

---

3. DirectionalLight

---

 

특정 방향으로 빛을 방출한다. 해 같은 느낌이다. 그림자는 다음에 알아보고 빛만 알아본다.

// 특정 방향으로 빛 방출
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
scene.add(directionalLight);

DirectionalLight를 추가하면 기본 내가 보고 있는 방향 위에서 빛이 쏟아질 것이다.

 

 

// 특정 방향으로 빛 방출
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

그렇다면 위치를 지정해 빛을 쏴준다면 어떨까?

(1,1,1) 위치 대략 우측 상단 위치에서 오브젝트에 빛을 쏴주고 있는 모양새이다.

 

 

 

DirectionalLight는 헬퍼도 제공한다.

// 특정 방향으로 빛 방출
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
const dlhelper = new THREE.DirectionalLightHelper(directionalLight, 0.5);
scene.add(dlhelper);

 

 

선이 잘 안보이니 선의 색(0xffffff 파란색)과 fov(75 -> 120)를 변경해본다.

import * as THREE from 'three'

import {
  WEBGL
} from './webgl'

if (WEBGL.isWebGLAvailable()) {

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

  // 카메라 추가
  const fov = 120;
  const aspect = window.innerWidth / window.innerHeight;
  const near = 0.1;
  const far = 1000;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

  camera.position.x = 0;
  camera.position.y = 0.1;
  camera.position.z = 1.8;
  camera.lookAt(new THREE.Vector3(0, 0, 0));


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

  // 도형 추가
  const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
  const material = new THREE.MeshStandardMaterial({
    color: 0xffffff
  });
  const cube = new THREE.Mesh(geometry, material);
  cube.rotation.y = 0.5;
  scene.add(cube);

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

  // 빛 추가

  // 전역으로 빛 비춰줌
//   const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
//   scene.add(ambientLight);

  // 특정 방향으로 빛 방출
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
  directionalLight.position.set(1, 1, 1);
  scene.add(directionalLight);
  const dlhelper = new THREE.DirectionalLightHelper(directionalLight, 0.2, 0x0000ff);
  scene.add(dlhelper);

  // 하늘과 땅 컬러 지정
  const hemisphereLight = new THREE.HemisphereLight(0x004fff, 0xff0000, 1);
  // scene.add(hemisphereLight);

  // 한 방향으로 빛 방출 (예. 전구)
  const pointLight = new THREE.PointLight(0xffffff, 1);
  pointLight.position.set(1, 1, 1);
  // scene.add(pointLight);
  // const plhelper = new THREE.PointLightHelper(pointLight, 0.5);
  // scene.add(plhelper);

  // 직사각형 빛 방출
  const rectLight = new THREE.RectAreaLight(0xffffff, 2, 1, 1);
  rectLight.position.set(0.5, 0.5, 1);
  rectLight.lookAt(0, 0, 0);
  // scene.add(rectLight);

  // 직사각형 빛 방출
  const spotLight = new THREE.SpotLight(0xffffff, .5);
  spotLight.position.set(0.5, 0.5, 1);
  // scene.add(spotLight);
  // const slhelper = new THREE.SpotLightHelper(spotLight, 0.5);
  // scene.add(slhelper);


  function render(time) {
    renderer.render(scene, camera);
  }
  requestAnimationFrame(render);

  // 반응형 처리
  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);
}

 

어디서 빛을 비추는지 확인할 수 있다.

 

 

 

---

4. HemisphereLight

---

// 하늘과 땅 컬러 지정
const hemisphereLight = new THREE.HemisphereLight(0x004fff, 0xff0000, 1);
scene.add(hemisphereLight);

하늘색과 지상색 2가지를 표현한다.

하늘색은 파란색이라고 하고, 땅을 빨간색이라고 해본다.

이 때 오브젝트는 하늘색과 땅색을 받아서 색이 변한다.

1은 빛의 세기이다. 0~1 사이의 값을 주면 된다.

 

 

카메라의 위치 y를 1로 올려보면 윗면이 파랗게 되어있는 것을 볼 수 있다.

 

 

이 변화에 대해 잘 이해하려면 Sphere로 모양을 바꿔보면 된다.

// 도형 추가
const geometry = new THREE.SphereGeometry(0.5, 32, 16);
const material = new THREE.MeshStandardMaterial({
    color: 0xffffff
});

 

 

---

5. PointLight

---

const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(1, 1, 1);
scene.add(pointLight);

 

 

 

PointLight에는 헬퍼도 존재한다.

// 한 방향으로 빛 방출 (예. 전구)
  const pointLight = new THREE.PointLight(0xffffff, 1);
  pointLight.position.set(1, 1, 1);
  scene.add(pointLight);
  const plhelper = new THREE.PointLightHelper(pointLight, 0.5, 0xFF7F00);
  scene.add(plhelper);

 

헬퍼를 이용해 어디서 빛이 들어오는지 확인할 수 있다.

 

const plhelper = new THREE.PointLightHelper(pointLight, 0.1, 0xFF7F00);

가운데 0.5 > 0.1로 파라미터 값을 줄이면 헬퍼 사이즈가 줄어든다.

 

 

---

6. RectAreaLight

---

const rectLight = new THREE.RectAreaLight(0xffffff, 2, 1, 1);

 

색, 넓이, 높이, 세기를 파라미터로 넣으면 된다.

 

const rectLight = new THREE.RectAreaLight(0xffffff, 2, 1, 1);
rectLight.lookAt(0, 0, 0);
scene.add(rectLight);

이런식으로 고정 시야를 lookAt으로 고정하고, scene에 적용하면 다음과 같다.

 

 

rectLight.position.set(0.5, 0.5, 1);

여기에 빛의 방향을 조정하면 다음과 같다.

 

const rectLight = new THREE.RectAreaLight(0xffffff, 2, 1, 1);
rectLight.position.set(0.5, 0.5, 1);
rectLight.lookAt(0, 0, 0);
scene.add(rectLight);

 

 

---

7. SpotLight

 

---

 

특정 위치를 세게 빛으로 쏘는 것이다.

const spotLight = new THREE.SpotLight(0xffffff, 0.5);
spotLight.position.set(0.5, 0.5, 1);
scene.add(spotLight);
const slhelper = new THREE.SpotLightHelper(spotLight, 0.5);
scene.add(slhelper);