1. Getting Started

Getting Started

Installation

  1. Install Threlte and three.js
    terminal 
    npm install threlte three

  2. Install three.js types

    Optional for TypeScript users

    terminal 
    npm install -D @types/three

  3. Adapt SvelteKit config

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

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

export default config

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'
  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 ->