1. Getting Started

Getting Started

Installation

  1. Install threlte and three.js

    Threlte consists of several packages but @threlte/core is required

    terminal 
    npm install @threlte/core @threlte/extras three

  2. Install three.js types

    Optional for TypeScript users

    terminal 
    npm install -D @types/three

  3. Adapt Vite Configuration

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

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

TIP

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

First Scene

Build your first scene:

Open in a Svelte REPL

<script>
  import { CircleBufferGeometry, MeshStandardMaterial, BoxBufferGeometry, DoubleSide } from 'three'
  import { DEG2RAD } from 'three/src/math/MathUtils'
  import {
    AmbientLight,
    Canvas,
    DirectionalLight,
    Group,
    HemisphereLight,
    Mesh,
    OrbitControls,
    PerspectiveCamera
  } from '@threlte/core'
  import { spring } from 'svelte/motion'

  const scale = spring(1)
</script>

<div>
  <Canvas>
    <PerspectiveCamera position={{ x: 10, y: 10, z: 10 }} fov={24}>
      <OrbitControls
        maxPolarAngle={DEG2RAD * 80}
        autoRotate={false}
        enableZoom={false}
        target={{ y: 0.5 }}
      />
    </PerspectiveCamera>

    <DirectionalLight shadow position={{ x: 3, y: 10, z: 10 }} />
    <DirectionalLight position={{ x: -3, y: 10, z: -10 }} intensity={0.2} />
    <AmbientLight intensity={0.2} />

    <!-- Cube -->
    <Group scale={$scale}>
      <Mesh
        interactive
        on:pointerenter={() => ($scale = 2)}
        on:pointerleave={() => ($scale = 1)}
        position={{ y: 0.5 }}
        castShadow
        geometry={new BoxBufferGeometry(1, 1, 1)}
        material={new MeshStandardMaterial({ color: '#333333' })}
      />
    </Group>

    <!-- Floor -->
    <Mesh
      receiveShadow
      rotation={{ x: -90 * (Math.PI / 180) }}
      geometry={new CircleBufferGeometry(3, 72)}
      material={new MeshStandardMaterial({ side: DoubleSide, color: 'white' })}
    />
  </Canvas>
</div>

<style>
  div {
    height: 100%;
    width: 100%;
  }
</style>

It should look something like this:

Congratulations 🎉 Orbit around the cube, hover over it and change some values.

Also have a look at the slightly more elaborate example including interactivity in a Svelte REPL.

Previous <- Introduction
Next Features ->