threlte logo
Getting Started

Installation

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 6 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 declaratively and state-driven. Three.js and Threlte's core the library are required.

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.

TypeScript types for three.js.

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

npm install three @threlte/core

Configuration

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

vite.config.js
const config = {
  // …
  ssr: {
    noExternal: ['three']
  }
}

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

Previous PageIntroduction
Next PageYour First Scene