Show HN: Svelte와 Three.js 기반 웹용 3D 프레임워크

 (threlte.xyz)
4P by GN⁺ | ★ favorite | 댓글 1개
  • Threlte는 웹에서 인터랙티브 3D 앱을 빠르게 만들기 위해 Svelte의 반응형 컴포넌트 모델을 Three.js 위에 얹은 오픈소스 프레임워크임
  • <T.Mesh> 같은 선언형 컴포넌트로 Three.js 객체를 구성하고, Svelte 라이프사이클을 통해 이벤트 구독과 상태 변경을 처리함
  • 기본 도구로 Rapier 물리 엔진, Theatre.js 애니메이션 도구, @threlte/gltf, @threlte/extras를 함께 제공해 초기 3D 앱 구성을 줄여줌
  • <T> 컴포넌트만으로 부족한 동작은 타입 안전한 Plugins로 커스텀 props·이벤트를 추가해 확장할 수 있음
  • Svelte 생태계에서 선언형 THREE 라이브러리와 WebGL 앱 제작 도구를 찾는 개발자에게 문서화와 사용성이 강점으로 평가됨

Svelte 방식으로 Three.js 장면 구성

  • Threlte는 Svelte와 Three.js 위에 만들어진 웹용 3D 프레임워크임
  • 선언형·반응형 컴포넌트로 인터랙티브 3D 앱을 빠르게 구축하는 데 초점을 둠
  • Svelte 컴포넌트의 라이프사이클을 활용해 다음 작업을 처리할 수 있음
    • 이벤트 구독
    • 상태 변경 처리
    • 컴포넌트 기반 동작 연결
  • 예시 코드는 <T.Mesh> 안에 지오메트리와 머티리얼을 배치하고, scale, position.x, onclick 같은 props와 이벤트를 직접 지정함
  • 첫 장면 구성은 Make Your First Scene에서 확인 가능함

함께 제공되는 도구와 확장 방식

  • Threlte는 “batteries included” 구성을 내세우며 3D 앱 제작에 필요한 도구를 함께 제공함
    • Rapier: 물리 엔진
    • Theatre.js: 전문 모션 디자인 도구셋을 갖춘 애니메이션 라이브러리
    • @threlte/gltf: GLTF 파일을 Threlte 컴포넌트로 변환하는 도구
    • @threlte/extras: 시작에 필요한 컴포넌트와 유틸리티 모음
  • Rapier 예시는 RigidBody, AutoColliders, <T.Mesh>를 조합해 구체 형태 충돌체와 메시를 구성함
  • @threlte/extras 예시는 Float와 GLTF 컴포넌트로 /models/flower.glb 모델을 불러오고, 그림자·위치·스케일을 지정함
  • @threlte/extras 사용법은 Documentation에서 확인할 수 있음
  • Plugins는 <T>에 커스텀 props와 커스텀 이벤트를 타입 안전하게 추가하는 확장 방식임
    • 예시 플러그인은 injectPlugin으로 lookAt prop을 등록하고, $effect 안에서 args.ref.lookAt(args.props.lookAt)을 호출함
    • 고급 사용법은 Plugins 문서에 정리돼 있음
  • 시작 문서와 커뮤니티 링크도 제공됨

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들
  • Threlte 작성자임. 올려줘서 고맙고, 지금 무엇을 하는지 궁금하면 방금 Svelte Summit Spring에서 발표한 영상을 보면 됨: https://www.youtube.com/live/gkJ09joGBZ4?si=KX9ZwfWTixj6r55Y...
    핵심적으로는 두 가지를 하고 있음. 하나는 Svelte 5 대응인데, Threlte는 이벤트 처리를 더 효율적으로 만들거나 DOM 요소가 아니라 컴포넌트에 Svelte 전환을 적용하려고 컴포넌트 내부를 많이 건드렸기 때문에 일반 Svelte 라이브러리보다 일이 좀 더 많음. 이런 것들 중 상당수는 Svelte 5에 내장됐고, 전환 같은 나머지는 당분간 내려놓아야 함
    다른 하나는 Threlte Studio임. 아직 어떻게 설명하는 게 좋을지 모르겠지만, 코드를 시각적으로 수정할 수 있게 해주는 편집기라고 할 수 있음. 확장 가능해서 자신의 작업 흐름에 맞출 수 있고, 어디까지 갈 수 있을지 궁금함. 관심 있으면 Discord http://chat.threlte.xyz나 X https://twitter.com/threlte를 따라오면 됨
    • Threlte가 React-Three-Fiber와 비교해 기능 동등성이나 성능 면에서 어떤지 궁금함
    • 마침 어제 Svelte 튜토리얼을 끝냈고, Three.js를 Svelte로 가져올 수 있는지 궁금해서 찾아봤음
      Svelte가 정말 직관적이라 3D 환경도 효율적으로 관리할 수 있겠다고 자연스럽게 생각했고, 그래서 “Svelte + three.js”를 검색하게 됨
      PlayCanvas, Babylon.js를 써온 입장이라 Threlte Studio 개발이 매우 기대됨. DREI는 모든 것을 디렉터리처럼 펼쳐주는 점이 좋지만, 익숙한 “스튜디오 도구”가 떠올랐음. Threlte Studio의 예상 일정이 궁금함
  • react-three-fiber와 react-three-drei를 써왔는데, 이 프로젝트의 React 버전이라고 보면 됨. 예제가 압도적이고 훌륭함: https://docs.pmnd.rs/react-three-fiber/getting-started/examp...
    특히 좋아하는 건 이미지 갤러리 예제임. 이미지를 클릭하면 다른 방, 즉 다른 갤러리로 들어가도록 수정해봤음
    https://github.com/pmndrs/drei는 예제와 도우미 모음임
    가장 인상 깊었던 건 GLTF 모델, 텍스트 위 비디오 텍스처, 반사 등을 쓰는 예제였고, 독립 실행 버전은 https://bfplr.csb.app/에 있음
    더 인상적인 건 코드가 그리 많지 않다는 걸 보여주는 샌드박스임: https://codesandbox.io/p/sandbox/ground-reflections-and-vide...
    three.js 위에 계층을 올리는 데는 많은 작업이 필요하고 꽤 머리 아픈 일도 겪었지만, 그래도 잠재력은 큼. three.js를 쓰면서 웹사이트 개발을 바라보는 방식이 완전히 바뀌었고, Svelte를 쓰는 사람이라면 꼭 살펴볼 만함
    • “three.js를 쓰면서 웹사이트 개발을 바라보는 방식이 완전히 바뀌었다”는 부분이 구체적으로 어떻게 바뀌었는지 궁금함
    • 정말 멋짐. 확실히 Yugop 느낌이 나고, 이런 도구들이 온라인 미디어의 완전히 새로운 스타일을 만들 수 있겠다는 게 보임. 잠재력이 분명함
  • 둘러보다가 Threlte v6를 보여주는 데모 앱을 찾았음: https://github.com/grischaerbe/threlter, https://threltemania.xyz/
    Technical Outline, 특히 단순화한 자동차 물리 설명이 꽤 유익함. 본질적으로 트랙 편집기까지 갖춘 Trackmania 클론이고, Svelte/Threlte의 장점을 최대한 활용한 예제로 보임
    • “Svelte/Threlte의 장점을 최대한 활용했다”면, 본인 말로 그 장점이 뭐라고 보나?
  • 흥미로워 보임. 다만 Svelte나 React 없이 선언형 3D와 컴포넌트를 하고 싶다면 A-Frame이나 X3D도 있음
    사람들이 정말 선언형 3D를 원하는지는 궁금함. X3D/VRML은 25년 넘게 있었고 A-Frame도 8년 됐지만 둘 다 아주 대중적이진 않았고, 다른 형식들도 여럿 나왔다가 사라졌음. 반면 three.js와 명령형/절차형 3D는 전반적으로 잘되고 있는데 왜 그런지 궁금함
    • Three.js에 대한 프레임워크 통합 형태의 선언형 3D는 매우 인기 있고, 지금 Three.js 사이트에서 가장 많이 쓰이는 전문 구성이라고 봐도 된다고 생각함. 그중 가장 인기 있는 건 react-three-fiber임. 이런 프레임워크의 선언적 성격 덕분에 재사용이 쉬워지고, 그게 생태계의 기반이 됨
    • react-three-fibre 같은 프레임워크가 인기 있는 이유는 초보자가 JavaScript를 거의 몰라도 기존 컴포넌트를 조립할 수 있기 때문임. 이 분야 인플루언서들이 “코드 6줄만으로 이런 구성기를 만들기!” 같은 식으로 말하는 걸 흔히 봄. 이런 도구를 인기 있게 만드는 건 코드의 선언적 성격이 아니라 빠른 제작 속도와 쉬워 보이는 사용성임
  • Threlte/SvelteKit/Tauri 조합이 멋짐. 최근 Threlte를 써봤고 이런 걸 만들었음: https://crusaders-ashy.vercel.app/
    최적화가 아주 잘된 건 아니고 모든 모델은 Sketchfab의 무료 모델임. 3D 게임 환경이라 최신 PC가 있으면 도움이 됨
  • Svelte와 Threlte 둘 다 좋아함. 공원 환경에 3D 체스판을 만들고 lichess까지 연동했는데, 모든 게 놀랄 만큼 쉬웠음
    많은 UI가 3D 활용으로 이득을 볼 수 있다고 생각함
    • 그게 어떻게 보이는지 꼭 보고 싶음. 이 라이브러리들을 쓰는 간단한 예시라도 좋음
  • 멋진 프로젝트임. 더 기본에 가까운 접근을 선호한다면 A-Frame도 괜찮음: https://aframe.io/
  • 문법이 정말 좋음. react-three-fiber로 Three.js를 JSX로 처음 봤을 때만큼 인상적임. 언젠가 Svelte + Three를 쓰게 되면 이런 선택지가 있다는 걸 알아두면 좋겠음
  • 스크롤이 얼마나 부드러운지 인상적임. 스크롤 기반 애니메이션이 있는 웹페이지는 자주 끊기고 버벅인다고 느꼈는데, 실제로 모니터 주사율에 맞춰 실행되면 효과가 이렇게 좋을 수 있다는 걸 몰랐음
  • 2년 정도 써왔음. 문서를 볼 때마다 새 extra가 추가돼 있고, legrisch도 훌륭함. Discord도 꽤 활발함. 놀라운 도구 모음이고 앞으로 어디까지 갈지 기대됨
답변달기