[Three.js] Tutorial

민병대·2025년 1월 3일

Scene

객체와 광원 등을 저장하는 공간

const scene = new THREE.Scene();

Camera

객체 촬영 방법

OrthographicCamera은 원근법 무시
PerspectiveCamera은 원근법 적용

const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

fov (Field of View): 카메라의 시야각을 도 단위로 설정합니다. 보통 75도에서 90도가 일반적입니다.
aspect: 카메라의 종횡비를 설정합니다. 일반적으로 window.innerWidth / window.innerHeight로 설정합니다.
near: 카메라와 물체 사이의 최소 거리입니다. 이 거리보다 가까운 물체는 렌더링되지 않습니다.
far: 카메라와 물체 사이의 최대 거리입니다. 이 거리보다 먼 물체는 렌더링되지 않습니다.

Renderer

Scene과 Camera 객체를 렌더링

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

빛 효과

 // 방향광 추가
 const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5); // 조명 위치 설정
scene.add(directionalLight);

// 점광 추가
const pointLight = new THREE.PointLight(0xff0000, 1, 100); // 빨간색 점광
pointLight.position.set(-5, 5, 0); // 점광 위치 설정
scene.add(pointLight);

// 환경광 추가
const ambientLight = new THREE.AmbientLight(0x404040, 1);
scene.add(ambientLight);

Controls

<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>

  ...

// OrbitControls 추가
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  controls.update(); // 컨트롤 업데이트
}

예시

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Cube with Lighting</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
    <script>
      // Scene, Camera, Renderer 설정
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000,
      );
      const renderer = new THREE.WebGLRenderer();

      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // 큐브 추가
      const geometry = new THREE.BoxGeometry(1, 1, 1);
      const material = new THREE.MeshStandardMaterial({color: 0xfff000}); // MeshStandardMaterial 사용
      // material.color = 0xa3b18a;
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      scene.background = new THREE.Color('white');

      // 방향광 추가
      const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
      directionalLight.position.set(5, 5, 5); // 조명 위치 설정
      scene.add(directionalLight);

      // 점광 추가
      const pointLight = new THREE.PointLight(0xffffff, 1, 100); // 빨간색 점광
      pointLight.position.set(-1, 1, 0); // 점광 위치 설정
      scene.add(pointLight);

      // 환경광 추가
      const ambientLight = new THREE.AmbientLight(0x404040, 1); // 부드러운 흰색 빛
      scene.add(ambientLight);

      // OrbitControls 추가
      const controls = new THREE.OrbitControls(camera, renderer.domElement);
      camera.position.set(0, 3, 5);
      controls.autoRotate = true;

      // 애니메이션 루프
      function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        controls.update(); // 컨트롤 업데이트
      }

      animate();

      // 창 크기 조정
      window.addEventListener('resize', () => {
        const width = window.innerWidth;
        const height = window.innerHeight;

        renderer.setSize(width, height);
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
      });
    </script>
  </body>
</html>

민병대

마케터 출신 개발자

이전 포스트