Three.js with Vite
The fastest dev server for vanilla Three.js projects
Integration Guide
Overview
Vite is the recommended build tool for vanilla Three.js projects. With instant HMR, native ES modules, and optimized production builds, Vite is the gold standard for Three.js development without a framework overhead.
Quick Start
npm create vite@latest my-scene -- --template vanilla && npm install three// main.js
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
const canvas = document.querySelector('#canvas')
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100)
camera.position.z = 3
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true
const geometry = new THREE.TorusGeometry(1, 0.4, 32, 100)
const material = new THREE.MeshStandardMaterial({ color: '#6941c6', roughness: 0.4 })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
scene.add(new THREE.AmbientLight('white', 0.5))
scene.add(Object.assign(new THREE.DirectionalLight('white', 2), { position: [3, 3, 3] }))
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
})
const tick = () => {
controls.update()
renderer.render(scene, camera)
requestAnimationFrame(tick)
}
tick()✓Pros
- •Instant dev server startup regardless of project size
- •Native ES module imports — no bundling during dev
- •Three.js addons (OrbitControls, GLTFLoader) import cleanly
- •Optimized rollup build for production
- •TypeScript support out of the box
✗Cons
- •No SSR — purely client-side, not ideal for SEO-critical pages
- •No file-system routing — you manage routing manually
- •For large apps, consider adding a framework layer
Frequently Asked Questions
Is Vite the official recommendation for Three.js projects?
Yes. The official Three.js documentation and the three.js-journey course both recommend Vite as the primary build tool for vanilla Three.js.
How do I import Three.js addons in Vite?
Use the three/addons path: import { OrbitControls } from 'three/addons/controls/OrbitControls.js'. This replaces the old three/examples/jsm path.
Best Use Cases
- →Standalone WebGL experiments and demos
- →Creative coding projects
- →Three.js learning projects and sandboxes
- →Game prototypes