3D 로봇 스크롤 애니메이션 / 3D + three.js + GSAP

3D Model from Sketchfab

1) 3D 로봇 만들기

3D는 보통 블렌더를 가장 많이 사용합니다.
무료고 다운로드 받아서 설치 후 사용하면 됩니다.
그런데 조금 어렵습니다. 3D쪽으로 나갈게 아니면 너무 시간을 소비하는건 좋지 않은거 같아요.

웹에서 디자인용으로 사용하려면,
Vectary, Spline 같은 좀 더 쉬운 툴을 사용하는게 좋은데,
이건 glb, gltf 파일 export하려면 유료입니다.
저같으면 상업용 프로젝트에 3D를 디자인적 요소나 기능 설명 요소로 넣는다면,
Spline을 사용할거 같습니다.

Skechfab 에서 무료 오브젝트를 가져와서 사용하는 방법도 가능합니다.
( CC BY – 출처 표기 / 상업적 이용 가능 )

2) 3D 오브젝트 올리기

미디어 라이브러리는 glb, gltf 파일 등록이 안됩니다.
MIME 플러그인을 설치해서 glb, gltf파일을 등록합니다.

3) Three.js 불러오기

3D 자바스크립트 라이브러리인 Three.js 를 불러옵니다.

방법1) function.php 파일에 추가 ( 추천 )
방법2) CDN으로 불러오기

4) Canvas 넣기

워드프레스에 html 또는 code 모듈로 canvas를 원하는 위치에 넣습니다.

방법1) canvas 를 렌더링해서 자동으로 넣는 방법

<div id="three-container"> 

const renderer = new THREE.WebGLRenderer();
document.getElementById("three-container").appendChild(renderer.domElement);

방법2) canvas를 코딩으로 직접 넣는 방법

<canvas id="myCanvas"></canvas>

const canvas = document.getElementById("myCanvas");
const renderer = new THREE.WebGLRenderer({ canvas });

5) Three.js 기본설정

Scene 만들고, render 설정해주기

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 );

scene 만들고, camera 설정
render size 설정하고 원하는 html에 canvas 삽입

6) glb 모델 불러오기

const loader = new THREE.GLTFLoader();

oader.load(
  '/wp-content/uploads/2025/04/model.glb', 
  function (gltf) {
    const model = gltf.scene;
    scene.add(model);
    model.position.set(0, 0, 0);
  }
);

위치가 안맞을 경우에는 div 박스 만들어서 안으로 넣고 위치 맞춰야 합니다.

7) 모델에 애니메이션 주기

gsap.to(model.position, {
      x: 100,             
      duration: 2,      
      ease: "power2.inOut",
      });

이런식으로 애니메이션 주면 됩니다.
원하는 위치에 왔을때 움직이게 하려면 scroll trigger 주고 애니메이션 주면 됩니다.

8) Orbit Control 사용해서 클릭해서 모델 움직임 효과 주기

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.enableZoom = false;

카메라 움직임으로 마치 모델이 움직이는 효과를 줄 수 있습니다.

3D 모델을 이용한 다양한 인터랙티브한 디자인이 가능합니다.