3D와 Threlte — Svelte에서 Three.js 다루기

React에 React Three Fiber가 있다면, Svelte에는 Threlte가 있습니다 — 3D를 컴포넌트처럼 다룹니다.

개념 정의

Threlte 는 Three.js를 Svelte 컴포넌트로 감싼 라이브러리입니다. 명령형 Three.js 코드 대신 선언적 마크업으로 3D 씬을 구성할 수 있습니다.

설치

BASH

npm install three @threlte/core @threlte/extras
npm install -D @types/three

기본 씬

SVELTE

<script>
  import { Canvas } from '@threlte/core';
  import { OrbitControls } from '@threlte/extras';
  import Scene from './Scene.svelte';
</script>

<div class="canvas-wrapper">
  <Canvas>
    <Scene />
  </Canvas>
</div>

<style>
  .canvas-wrapper { width: 100%; height: 100vh; }
</style>

SVELTE

<!-- Scene.svelte -->
<script>
  import { T } from '@threlte/core';
  import { OrbitControls } from '@threlte/extras';

  let rotation = $state(0);

  // 매 프레임 회전
  import { useTask } from '@threlte/core';
  useTask((delta) => {
    rotation += delta;
  });
</script>

<!-- 카메라 -->
<T.PerspectiveCamera makeDefault position={[5, 5, 5]} fov={50}>
  <OrbitControls />
</T.PerspectiveCamera>

<!-- 조명 -->
<T.DirectionalLight position={[3, 10, 5]} intensity={1.5} />
<T.AmbientLight intensity={0.3} />

<!-- 회전하는 큐브 -->
<T.Mesh rotation.y={rotation}>
  <T.BoxGeometry args={[1, 1, 1]} />
  <T.MeshStandardMaterial color="#ff3e00" />
</T.Mesh>

<!-- 바닥 평면 -->
<T.Mesh rotation.x={-Math.PI / 2} position.y={-0.5}>
  <T.PlaneGeometry args={[10, 10]} />
  <T.MeshStandardMaterial color="#f0f0f0" />
</T.Mesh>

인터랙티브 오브젝트

SVELTE

<script>
  import { T } from '@threlte/core';
  import { interactivity } from '@threlte/extras';

  interactivity();

  let hovered = $state(false);
  let color = $state('#ff3e00');
  let scale = $state(1);
</script>

<T.Mesh
  scale={hovered ? 1.2 : 1}
  onpointerenter={() => { hovered = true; color = '#00ff00'; }}
  onpointerleave={() => { hovered = false; color = '#ff3e00'; }}
  onclick={() => { scale = scale === 1 ? 1.5 : 1; }}
>
  <T.SphereGeometry args={[0.5, 32, 32]} />
  <T.MeshStandardMaterial {color} />
</T.Mesh>

GLTF 모델 로딩

SVELTE

<script>
  import { useGltf } from '@threlte/extras';

  const gltf = useGltf('/models/robot.glb');
</script>

{#if $gltf}
  <T is={$gltf.scene} scale={0.5} />
{/if}

면접 포인트

"Three.js를 직접 쓰지 않고 Threlte를 쓰는 이유는?": 선언적 컴포넌트 기반으로 3D 씬을 구성할 수 있어 코드 구조가 깔끔해지고, Svelte의 반응성과 자연스럽게 통합됩니다. 리소스 정리도 컴포넌트 라이프사이클에 맞춰 자동 처리됩니다.
"3D 웹 앱의 성능 고려사항은?": 폴리곤 수, 텍스처 크기, 조명 수를 관리해야 합니다. LOD(Level of Detail), 인스턴싱, 텍스처 압축 등의 최적화 기법이 필요합니다.

정리

Threlte는 Svelte의 선언적 패러다임을 3D 세계로 확장합니다. HTML 마크업처럼 3D 오브젝트를 배치하고, Svelte의 반응성으로 인터랙션을 처리할 수 있어, Three.js의 진입 장벽을 크게 낮춰줍니다.