Three.js with SvelteKit
Minimal boilerplate, maximum 3D performance with SvelteKit
Integration Guide
Overview
SvelteKit's compile-time approach produces lean, fast bundles — a great match for Three.js experiences where performance is critical. Svelte's reactive stores and lifecycle hooks integrate cleanly with the Three.js render loop.
Quick Start
npm install three<!-- src/routes/+page.svelte -->
<script>
import { onMount, onDestroy } from 'svelte'
import * as THREE from 'three'
let canvas
let renderer, animId
onMount(() => {
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000)
renderer = new THREE.WebGLRenderer({ canvas })
renderer.setSize(canvas.clientWidth, canvas.clientHeight)
const mesh = new THREE.Mesh(
new THREE.IcosahedronGeometry(1, 1),
new THREE.MeshNormalMaterial({ wireframe: true })
)
scene.add(mesh)
camera.position.z = 3
const animate = () => {
animId = requestAnimationFrame(animate)
mesh.rotation.x += 0.005
mesh.rotation.y += 0.01
renderer.render(scene, camera)
}
animate()
})
onDestroy(() => {
cancelAnimationFrame(animId)
renderer?.dispose()
})
</script>
<canvas bind:this={canvas} class="w-full h-screen block" />✓Pros
- •Tiny bundle size — no virtual DOM overhead
- •Svelte stores integrate elegantly with 3D scene state
- •onMount / onDestroy map directly to Three.js setup/teardown
- •Threlte library provides declarative R3F-like DX for Svelte
- •Excellent Vite integration for fast builds
✗Cons
- •Smaller community than React/Next.js for Three.js resources
- •Threlte is less mature than React Three Fiber
- •Manual TypeScript types may need importing for Three.js
Frequently Asked Questions
What is Threlte?
Threlte (threlte.xyz) is a component library for Svelte that wraps Three.js declaratively, similar to React Three Fiber. It's the recommended approach for complex Three.js scenes in SvelteKit.
How do I handle window resize with Three.js in SvelteKit?
Use a Svelte action or add an event listener inside onMount, and clean it up in onDestroy to prevent memory leaks.
Best Use Cases
- →Interactive portfolio sites
- →Creative WebGL experiments
- →Lightweight product showcases
- →Games and interactive experiences