threlte logo
Getting Started


To start using Threlte, you can either scaffold a new project using the CLI or install the packages manually in an existing project.

Scaffold a new Threlte project

The easiest way to get started with Threlte is to use the command npm create threlte to scaffold a new project. This CLI will interactively guide you through creating a new SvelteKit project as well as installing and configuring Threlte and its dependencies.

npm create threlte my-project

Manually install Threlte in an existing project

Threlte consists of 7 packages which can be installed and used individually. @threlte/core and Three.js itself are required for all projects while the other packages are optional. @threlte/gltf does not need to be installed separately as it can be used with npx, the resulting Threlte components however require @threlte/extras to be installed.

Choose the packages you want to use

Compose Three.js scenes in a declarative and state-driven way. Three.js is required as a peer dependency.

Components, helpers, hooks and more that extend the core functionality.

A command-line tool that turns GLTF assets into declarative and re-usable Threlte components. The generated Threlte components make use of the package @threlte/extras.

Components and hooks to use the Rapier physics engine in Threlte.

Components and hooks to use the animation library Theatre.js in Threlte.

Components and hooks for VR and AR.

Components and hooks to use the flex engine Yoga in Threlte.

TypeScript types for Three.js.

Install the packages with npm, pnpm, yarn or any other package manager you prefer.

npm install three @threlte/core


Adapt vite.config.js

If you are using Threlte with SvelteKit, adapt your Vite configuration to prevent three from being externalized for SSR by vites externalization step

const config = {
  // …
  ssr: {
    noExternal: ['three']

Adapt tsconfig.json

If you are using TypeScript, you need to add the following to your tsconfig.json to make sure that the types of the Threlte components are available:

  "compilerOptions": {
    "moduleResolution": "Bundler"

See this comment for tips on how to reduce bundle size when working with bundlers like vite and three.js.