Threlte - 3D Framework for Svelte

Language: TypeScript / JavaScript
Framework: Svelte / SvelteKit
3D Engine: Three.js
License: MIT
Stars: 3.3K+
Owner: threlte
Repo: https://github.com/threlte/threlte
Docs: https://threlte.xyz

Core Packages:
- @threlte/core - Three.js bindings for Svelte
- @threlte/extras - Extended components and helpers
- @threlte/gltf - CLI for converting GLTF assets to components
- @threlte/rapier - Physics engine integration
- @threlte/theatre - Animation studio support
- @threlte/xr - VR and AR components
- @threlte/flex - Layout engine for 3D UIs
- @threlte/studio - Spatial programming tools

# Create a new SvelteKit project (if needed)
npm create svelte@latest my-threlte-app
cd my-threlte-app
npm install

# Scaffold a new Threlte project
npm create threlte

# Follow the interactive prompts to:
# 1. Choose your project name
# 2. Select which Threlte packages to install
# 3. Configure your setup

# Minimum installation
npm install three @threlte/core

# TypeScript support (recommended)
npm install -D @types/three

# Optional packages for extended functionality
npm install @threlte/extras
npm install @threlte/rapier
npm install @threlte/theatre
npm install @threlte/xr
npm install @threlte/flex

<!-- App.svelte -->
<script>
  import { Canvas } from '@threlte/core'
  import Scene from './Scene.svelte'
</script>

<Canvas>
  <Scene />
</Canvas>

<style>
  :global(body) {
    margin: 0;
    padding: 0;
  }
</style>

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

<!-- Basic cube with default material -->
<T.Mesh>
  <T.BoxGeometry />
  <T.MeshBasicMaterial color="hotpink" />
</T.Mesh>

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

<!-- Custom camera -->
<T.PerspectiveCamera
  makeDefault
  position={[10, 10, 10]}
  oncreate={(ref) => {
    ref.lookAt(0, 1, 0)
  }}
/>

<!-- Directional light with shadows -->
<T.DirectionalLight position={[0, 10, 10]} castShadow />

<!-- Cube with standard material -->
<T.Mesh position.y={1} castShadow>
  <T.BoxGeometry args={[1, 2, 1]} />
  <T.MeshStandardMaterial color="hotpink" />
</T.Mesh>

<!-- Ground plane -->
<T.Mesh rotation.x={-Math.PI / 2} receiveShadow>
  <T.CircleGeometry args={[4, 40]} />
  <T.MeshStandardMaterial color="white" />
</T.Mesh>

<!-- Scene.svelte -->
<script>
  import { T, useTask } from '@threlte/core'
  
  let rotation = $state(0)
  
  // Run on every frame
  useTask((delta) => {
    rotation += delta
  })
</script>

<T.Mesh rotation.y={rotation}>
  <T.BoxGeometry />
  <T.MeshStandardMaterial color="hotpink" />
</T.Mesh>

<!-- Scene.svelte -->
<script>
  import { T, useTask } from '@threlte/core'
  import { interactivity } from '@threlte/extras'
  import { Spring } from 'svelte/motion'
  
  // Enable interactivity plugin
  interactivity()
  
  const scale = new Spring(1)
  let rotation = $state(0)
  
  useTask((delta) => {
    rotation += delta
  })
</script>

<T.Mesh
  rotation.y={rotation}
  scale={scale.current}
  onpointerenter={() => { scale.target = 1.5 }}
  onpointerleave={() => { scale.target = 1 }}
>
  <T.BoxGeometry />
  <T.MeshStandardMaterial color="hotpink" />
</T.Mesh>

<!-- Scene.svelte -->
<script>
  import { T, useTask } from '@threlte/core'
  import { interactivity } from '@threlte/extras'
  import { Spring } from 'svelte/motion'
  
  interactivity()
  const scale = new Spring(1)
  let rotation = $state(0)
  
  useTask((delta) => {
    rotation += delta
  })
</script>

<T.PerspectiveCamera
  makeDefault
  position={[10, 10, 10]}
  oncreate={(ref) => {
    ref.lookAt(0, 1, 0)
  }}
/>

<T.DirectionalLight position={[0, 10, 10]} castShadow />

<T.Mesh
  rotation.y={rotation}
  position.y={1}
  scale={scale.current}
  castShadow
  onpointerenter={() => { scale.target = 1.5 }}
  onpointerleave={() => { scale.target = 1 }}
>
  <T.BoxGeometry args={[1, 2, 1]} />
  <T.MeshStandardMaterial color="hotpink" />
</T.Mesh>

<T.Mesh rotation.x={-Math.PI / 2} receiveShadow>
  <T.CircleGeometry args={[4, 40]} />
  <T.MeshStandardMaterial color="white" />
</T.Mesh>

# Convert GLTF to Threlte component
npx @threlte/gltf model.gltf

# This creates a reusable Svelte component from your 3D model

<!-- Scene.svelte -->
<script>
  import { T } from '@threlte/core'
  import Model from './Model.svelte'  // Generated by @threlte/gltf
</script>

<T.PerspectiveCamera makeDefault position={[0, 5, 10]} />
<T.DirectionalLight position={[5, 5, 5]} />

<Model scale={2} position={[0, 0, 0]} />

<!-- Scene.svelte -->
<script>
  import { T } from '@threlte/core'
  import { World, RigidBody, AutoColliders } from '@threlte/rapier'
</script>

<World gravity={[0, -9.81, 0]}>
  <!-- Ground -->
  <RigidBody type="fixed">
    <AutoColliders shape="cuboid">
      <T.Mesh position.y={-0.5}>
        <T.BoxGeometry args={[10, 1, 10]} />
        <T.MeshStandardMaterial color="gray" />
      </T.Mesh>
    </AutoColliders>
  </RigidBody>
  
  <!-- Falling cube -->
  <RigidBody>
    <AutoColliders shape="cuboid">
      <T.Mesh position.y={5}>
        <T.BoxGeometry />
        <T.MeshStandardMaterial color="hotpink" />
      </T.Mesh>
    </AutoColliders>
  </RigidBody>
</World>

<!-- App.svelte -->
<script>
  import { Canvas } from '@threlte/core'
  import { XR, Hand, Controller } from '@threlte/xr'
  import Scene from './Scene.svelte'
</script>

<Canvas>
  <XR>
    <Hand hand="left" />
    <Hand hand="right" />
    <Controller left />
    <Controller right />
    <Scene />
  </XR>
</Canvas>

1. Interactive Product Showcases
   - 3D product configurators
   - Virtual showrooms
   - E-commerce visualizations

2. Data Visualization
   - 3D charts and graphs
   - Spatial data representation
   - Interactive dashboards

3. Games and Experiences
   - Browser-based games
   - Interactive storytelling
   - Educational simulations

4. VR/AR Applications
   - Virtual tours
   - Immersive training
   - Collaborative 3D spaces

5. Creative Portfolios
   - Animated landing pages
   - Interactive art installations
   - 3D typography and effects

// vite.config.js - Optimize Three.js bundle
export default {
  ssr: {
    noExternal: ['three', 'troika-three-text']
  },
  optimizeDeps: {
    include: ['three']
  }
}

// Use level of detail (LOD)
import { T } from '@threlte/core'
import { LOD } from 'three'

// Dispose of unused resources
import { onDestroy } from 'svelte'
import { useThrelte } from '@threlte/core'

const { scene } = useThrelte()
onDestroy(() => {
  scene.traverse((object) => {
    if (object.geometry) object.geometry.dispose()
    if (object.material) object.material.dispose()
  })
})

<!-- +page.svelte -->
<script>
  import { browser } from '$app/environment'
  import { Canvas } from '@threlte/core'
  import Scene from './Scene.svelte'
</script>

{#if browser}
  <Canvas>
    <Scene />
  </Canvas>
{:else}
  <div class="loading">Loading 3D scene...</div>
{/if}

<style>
  .loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
</style>

<!-- Scene.svelte -->
<script>
  import { T, useThrelte } from '@threlte/core'
  import { OrbitControls } from '@threlte/extras'
  
  // Access Three.js internals for debugging
  const { renderer, scene, camera } = useThrelte()
  
  // Log scene graph
  $: console.log('Scene:', $scene)
</script>

<!-- Add orbit controls for easy navigation during development -->
<OrbitControls />

<!-- Enable stats display -->
<T.PerspectiveCamera makeDefault position={[5, 5, 5]} />

<!-- Your scene objects here -->

✓ Declarative Three.js - Build 3D scenes with Svelte components
✓ Fully Reactive - Leverage Svelte's reactivity system
✓ Type-Safe - Full TypeScript support with auto-completion
✓ Modular Architecture - Install only what you need
✓ Physics Engine - Built-in Rapier physics integration
✓ Animation Studio - Theatre.js integration for complex animations
✓ VR/AR Ready - WebXR support out of the box
✓ GLTF Support - CLI tool for model conversion
✓ Interactive - Built-in pointer events and interactivity
✓ Performance - Optimized for production use
✓ Flexible Layout - 3D flexbox layout engine
✓ Well Documented - Comprehensive docs and examples

Official Documentation: https://threlte.xyz
GitHub Repository: https://github.com/threlte/threlte
Examples Gallery: https://threlte.xyz/docs/examples
Discord Community: https://discord.gg/EqUBCfCaGm
Twitter: @threlte

Learning Resources:
- Getting Started Guide: https://threlte.xyz/docs/learn/getting-started
- API Reference: https://threlte.xyz/docs/reference
- Interactive Examples: https://threlte.xyz/docs/examples
- Community Tutorials: https://joyofcode.xyz/introduction-to-3d-with-svelte