Three.js로 웹페이지에 3D 그래픽 넣기 (feat.blender)

 

블렌더로 3D 오브젝트 만들고 Three.js로 반응형을 고려한 웹 렌더링 하기

목차

1. 웹 메인 페이지에 커서를 추적하는 3D 오브젝트 넣기

2. 준비물: Three.js와 3D 오브젝트(를 직접 만들어 봤다)

3. blender로 3D 오브젝트 만들기

4. Three.js로 웹페이지에 객체 넣기

---

1. 웹 메인 페이지에 커서를 추적하는 3D 오브젝트 넣기

일단 기존 피그마로 대충 디자인한 메인 화면은 아래와 같았다.

이렇게 그냥 쭉 아래로 스크롤하는 메인 화면이다.

 

그런데 리팩토링으로 남겨두려했지만 메인 작업을 시작하려니 너무 못생겨서 하기가 싫은 거다.

그래서 일단 고려만 했던 Three.js를 바로 투입해보기로 했다. 어차피 갈아엎게 될 메인이라면.. 스트레스 받지 말고 갈아엎기로 

 

 

---

2. 준비물: Three.js와 3D 오브젝트(를 직접 만들어 봤다)

1. Three.js

https://threejs.org/manual/#ko/fundamentals

Three.js는 웹페이지에 3D 객체를 쉽게 렌더링하도록 도와주는 JS 라이브러리이다. WebGL을 사용한다고 한다.

코드 보는데 OpenGL 수업 들었던 게 떠올라서 조금 익숙한 느낌이었다.

 

docs에 한국어도 있고 예시와 함께 설명이 정말 잘 되어있는 것 같다.

시간이 없어서 자세히 읽어보면서 하지는 못했지만 나중에 찬찬히 읽어보면 (특히 팁) 좋을 것 같다.

 

 

2. 3D 오브젝트

웹페이지에 3D 객체를 렌더링하려면 아무래도 3D 객체가 우선 필요하다.

사실 3D 객체야 ai로 뚝딱 만들어서 쓰면 되겠지 생각했으나..

https://www.meshy.ai/discover

https://hyper3d.ai/?lang=ko&gad_campaignid=23436059038&gbraid=0AAAABCNk7GYRlaWIKdh023Dat0yJDxD2t

 

 

 

안타깝게도 3D 모델을 그리는 ai들은 구독을 해야 다운 받거나, 아니면 정말 이상하게 생긴 오브젝트를 다운받을 수 있게 해주는 것만 있었다. 게다가 잘 만든 것도 내 마음에 쏙 들지는 않았다. 내가 그린 캐릭터여서 좀 마음에 안들게 생긴 걸 넘어갈 수가 없는 것이었다.

그래서 블렌더로 직접 객체까지 만들었다.. 근데 저 meshy는 친구 초대하면 한달동안 프로 플랜 무료 사용 가능하니까 이런 고집이 없다면 ai 사용하는 게 훨씬 낫다.

노베이스로 3D 객체 만들기 쉽지 않다.

 

---

3. blender로 3D 오브젝트 만들기

이건 개발과 상관 없는 얘기다. 오히려 이거 하는데 시간 너무 많이 써서 오늘 해야할 다른 일들을 못했다.

하지만 나름 만족스러운 결과를 얻은 것 같다.

내가 알기로 3D 렌더링 도구로 대표적인 것이 마야와 블렌더인데, 마야가 전문가 느낌이 좀 더 있대서 전에 블렌더를 한 번 써본 적이 있었다. 그 때 금방 하나 만들어 본 게 있어서 금방 하겠거니하고 만들어보다가 화를 봤다.

대학교 3학년 블렌더 4시간차 / 졸업생 1년 블렌더 6시간차

https://www.youtube.com/watch?v=RedV1S8ssDA&list=PLAosp_j4QfQfErnJbpZ1PcHw1Z74k_Xfd&index=3

유튜브에 블렌더 검색하다가 우니랑 좀 비슷하게 생긴 것 같아서 이거 보면서 했다. 마우스/키보드 누르는 것도 같이 떠서 더 보기 괜찮았던 것 같다.

 

완전 매끈매끈하게 할 수도 있긴한데 각진 게 뭔가 좀 더 3D 느낌 나는 것 같아서 일단 각진 걸로 넣어봤다. 그리고 저 spheer 앞머리가 좀 그런가 싶어서.. 나중에 다른 사람들한테도 물어봐야지..

 

 

---

4. Three.js로 웹페이지에 객체 넣기

6-7시간만에 얻은 .glb 파일을 이제 웹페이지에 그리기만 하면 된다.

• 브라우저에 오브젝트 렌더링하기
• 마우스/터치에 따라 오브젝트 회전시키기

할 일은 크게 이렇게 두가지이다. 여기서 신경쓸 점은 아래 정도가 될 것이다.

• 그냥 그리면 창 크기가 변할 때 렌더링 공간 및 오브젝트 크기가 그대로이기 때문에 innerWidth에 따라 실시간 반영이 필요
• 마우스에 시선을 잘 꽂도록 조정
• 렌더링 루프 관리 및 정리

 

1. import

typescript로 진행했다. 처음에는 THREE만 사용하려고 했는데 타입문제인지 버전문제인지 에러가 자꾸 나서 GLTFLoader, GLTF는 three-stdlib을 추가로 설치했다.

'use client';

import { useEffect, useRef } from 'react';
import * as THREE from 'three';
import { GLTFLoader } from 'three-stdlib';
import type { GLTF } from 'three-stdlib';

 

 

2. ref 참조

export default function ThreeHead() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // ref 값을 변수에 저장
    const container = containerRef.current;

useRef로 렌더링할 div 요소를 참조하고 container에 저장한다.

나중에 클린업할 때 바로 containerRef.current를 사용하면 이미 변경되었을 가능성으로 린트 경고가 발생하기 때문에 container 변수를 선언해서 담았다.

• useEffect 실행 시점: containerRef.current는 DOM 요소를 가리킴
• 클린업(언마운트) 과정 중 React가 ref를 먼저 null로 만든 다음 useEffect cleanup이 실행될 수 있음

 

 

3. Scene, Camera, Renderer, Light 생성

    // --- 동적 사이즈 ---
    const sizes = {
      width: window.innerWidth,
      height: window.innerHeight,
    };

    // --- 씬 / 카메라 / 렌더러 ---
    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(45, sizes.width / sizes.height, 0.1, 100);
    camera.position.set(0.5, 0, 4);

    const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
    renderer.setSize(sizes.width, sizes.height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

    containerRef.current.appendChild(renderer.domElement);

    // --- 조명 ---
    scene.add(new THREE.AmbientLight(0xffffff, 2));
    const dirLight = new THREE.DirectionalLight(0xffffff, 0.7);
    dirLight.position.set(0, 5, 5);
    scene.add(dirLight);

우선 윈도우 크기에 따라 동적 사이즈를 주기 위한 sizes를 선언하고,

3D 오브젝트를 그릴 공간 Scene, 오브젝트를 보는 시점인 Camera, 3D를 그리는 Renderer, 오브젝트를 비출 Light를 생성하자.

 

• THREE.Scene : 공간을 새로 생성한다
• HTREE.PerspectiveCamera : Camera를 생성한다.
  45 : 카메라 각도(degree)
  0.1 ~ 100 : 촬영이 가능한 공간으로, 이 밖에 오브젝트가 있으면 카메라에 안찍힌다.
  camera.position : 왼쪽, 위아래, 오른쪽에 대한 카메라 위치
• THREE.WebGLRenderer: Renderer를 생성한다.
  alpha: true → 배경 투명하게
  antialias : 경계선 부드럽게
• THREE.AmbientLight: 기본조명을 세팅한다.
  THREE.DirectionalLight: 이게 없으면 모델이 3D인데 3D가 아닌 느낌이 된다.

DirectionalLight 0, 0.3, 0.7

 

 

4. GLTF 모델 로드

    // --- GLTF 로드 ---
    const loader = new GLTFLoader();
    let head: InstanceType<typeof THREE.Object3D>;
    let baseScale = 1; // 기본 스케일 저장

    // 화면 크기에 따른 스케일 계산 함수
    const calculateScale = () => {
      // 기준: 1920px 화면에서 scale 1
      const scaleMultiplier = Math.min(sizes.width / 1920, 1.5); // 최대 1.5배까지
      return baseScale * scaleMultiplier;
    };

    loader.load('/images/head.glb', (gltf: GLTF) => {
      const model = gltf.scene;
      const group = new THREE.Group();
      group.add(model);

      const box = new THREE.Box3().setFromObject(model);
      const center = new THREE.Vector3();
      box.getCenter(center);
      model.position.sub(center);

      const size = new THREE.Vector3();
      box.getSize(size);
      const maxDim = Math.max(size.x, size.y, size.z);
      baseScale = 2 / maxDim; // 기본 스케일 저장

      const currentScale = calculateScale();
      group.scale.set(currentScale, currentScale, currentScale);

      group.rotation.y = Math.PI;

      scene.add(group);
      head = group;

      camera.lookAt(group.position);
    });

환경 세팅이 끝나면 이제 모델을 로드할 차례이다.

GLTFLoader로 오브젝트를 렌더링할 수 있는 loader를 선언하고, calculateScales함수를 정의해서 화면 크기에 따라 오브젝트 크기가 달라지도록 하였다.

 

loader.load('/imaes/head.glb')와 같이 3D 이미지 파일을 주고 안에서 세팅을 하면 된다.

처음에 오브젝트의 0,0,0이 중심축이 되는 느낌으로 회전을 해서 회전의 중심축이 오브젝트 내부의 정중앙이 되도록 포지셔닝을 했다.

그 아래는 스케일 계산으로, 만약 크기를 변경하지 않는다면 저만큼이 필요가 없다.

 

5. 마우스/터치 이벤트

    // --- 마우스/터치 위치 ---
    const mouse = { x: 0, y: 0 };

    // 위치 업데이트 공통 함수
    const updateMousePosition = (clientX: number, clientY: number) => {
      mouse.x = (clientX / sizes.width) * 2 - 0.8;
      mouse.y = -(clientY / sizes.height) * 2 + 1;
    };

    // 마우스 이벤트
    const onMouseMove = (e: MouseEvent) => {
      updateMousePosition(e.clientX, e.clientY);
    };

    // 터치 이벤트
    const onTouchMove = (e: TouchEvent) => {
      if (e.touches.length > 0) {
        const touch = e.touches[0];
        updateMousePosition(touch.clientX, touch.clientY);
      }
    };

    window.addEventListener('mousemove', onMouseMove);
    window.addEventListener('touchmove', onTouchMove, { passive: true });

처음에 마우스만 만들었다가 아차차하고 터치 이벤트를 급하게 넣었다.

화면 좌표를 3D 회전에 적합한 정규화 값으로 변환하기 위해서 계산이 조금 들어간다.

updateMousePosition에 들어간 수식의 경우, 아래와 같다.

(clientX / sizes.width) * 2 - 0.8  ▶︎▶︎

화면 내 상대적 위치 비율 * 중심 기준으로 확장 - 모델 시선 처리(UX) 보정용 상수

 

y는 브라우저는 아래로 갈수록 y가 증가하나, Three.js 회전은 위로 갈수록 증가하기 때문에 반대 부호가 된다.

 

 

6. 리사이즈 대응

    // --- 리사이즈 핸들러 ---
    const handleResize = () => {
      // sizes 객체 업데이트
      sizes.width = window.innerWidth;
      sizes.height = window.innerHeight;

      // 카메라 업데이트
      camera.aspect = sizes.width / sizes.height;
      camera.updateProjectionMatrix();

      // 렌더러 업데이트
      renderer.setSize(sizes.width, sizes.height);
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

      // 오브젝트 크기 업데이트
      if (head) {
        const newScale = calculateScale();
        head.scale.set(newScale, newScale, newScale);
      }
    };
    
    window.addEventListener('resize', handleResize);

윈도우 크기가 변하면 sizes를 먼저 업데이트하여 카메라, 렌더러, 오브젝트 크기가 모두 업데이트 된다.

 

7. 애니메이션 루프

    // --- 애니메이션 루프 ---
    const animate = () => {
      requestAnimationFrame(animate);
      if (head) {
        head.rotation.y = Math.PI + mouse.x * 1;
        head.rotation.x = -mouse.y * 1;
      }
      renderer.render(scene, camera);
    };
    animate();

requestAnimationFrame으로 매 프레임마다 애니메이션을 갱신한다.

렌더링한 객체 head에 마우스를 따라서 x축, y축 rotation을 주고, 해당하는 scene과 camera 렌더 결과를 그린다.

 

8. 클린업

    // --- 클린업 ---
    return () => {
      window.removeEventListener('mousemove', onMouseMove);
      window.removeEventListener('touchmove', onTouchMove);
      window.removeEventListener('resize', handleResize);
      // 저장된 변수 사용
      container.removeChild(renderer.domElement);
      renderer.dispose();
    };
  }, []);

위에서 선언한 이벤트가 많았기 때문에 메모리 누수 방지를 위해서 컴포넌트 언마운트 시 이벤트 제거 및 렌더러 해제를 둔다.

 

 

9. 리턴

  return (
    <div
      ref={containerRef}
      className="bg-blue-50 bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-size-[20px_20px]"
    />
  );

여기서 div는 렌더링 캔버스 역할을 한다. 배경은 그냥 넣어봤다.

 

 

 

 

참고

https://www.youtube.com/watch?v=RedV1S8ssDA&list=PLAosp_j4QfQfErnJbpZ1PcHw1Z74k_Xfd&index=3

https://savinglectures123.tistory.com/81

[threejs-journey 1-7] Resizing & FullScreen