Log in

Integration guide

Three.js with Vite

The fastest dev server for vanilla Three.js projects

All integration guides →
npm create vite@latest my-scene -- --template vanilla && npm install three[01]

Overview

Three.js in Vite

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.

[Scroll to continue]

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()
Where it helps[01]
  • +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
Where it costs you[02]
  • −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

Best fit

What this pairing is good at

Every stack has a shape it suits. These are the projects where Vite and Three.js pull in the same direction.

[04 cases]
[01]

Standalone WebGL experiments and demos

[02]

Creative coding projects

[03]

Three.js learning projects and sandboxes

[04]

Game prototypes

F.A.Q

Frequently asked questions

What people ask about running Three.js inside Vite.

Setup

Getting the scene on the page.

Yes. The official Three.js documentation and the three.js-journey course both recommend Vite as the primary build tool for vanilla Three.js.

In production

Performance, builds and gotchas.

Use the three/addons path: import { OrbitControls } from 'three/addons/controls/OrbitControls.js'. This replaces the old three/examples/jsm path.

Official documentation
Vite docs ↗Three.js docs ↗
Browse tools by tag
#webgl#optimization#website
Other integrations