svelthree

Create three.js content using Svelte components.

How to try latest svelthree NOW ?

• clone the svelthree repo

  e.g. using degit: npx degit vatro/svelthree

• create a svelthree-tarball and save it somewhere (see npm pack)

  open a new terminal from svelthree root folder and:

  npm i npm run build cd package

  open a new terminal from package folder and: npm pack --pack-destination ../some_directory/

• install the created svelthree-tarball

  e.g. in your existing SvelteKit-project (see create-svelte) add "svelthree" to "devDependencies" inside package.json file:

  "devDependencies": {
      ...
      "svelthree": "file:../some_directory/svelthree-1.0.0-next.0.98.tgz",
      ...
  }
  

  ... and run npm i (this will actually install svelthree and if not already installed: three incl. @types/three)

• Depending on your Svelte / SvelteKit project, you'll probably need to make some configuration changes (svelthree-starters coming soon!), but you're basically ready to rumble! 🚀

1.0.0-next.x DRAFT

Create three.js content using Svelte components.

👨🏻‍💻 Please keep in mind that updates may come frequently and include breaking changes.

Install

​ In your SvelteKit project:

• install three.js along with three.js types

  npm i -D three @types/three
  

• install svelthree

  npm i -D svelthree@next
  

Note: If you don't install a specific Svelte or three.js version, the latest supported Svelte and three.js (incl. types) versions will be automatically installed as svelthree's peer dependencies.

Quickstart

• todo: create new svelthree-app (publish after svelthree 1.0.0-next.1 release)

General Usage

• todo: new Vercel hosted SvelteKit website with some cool examples

Examples

• todo: new Vercel hosted SvelteKit website incl. REPL

Usage Example

<!-- HelloCube.svelte -->

<script>
  import {
    Canvas,
    Scene,
    PerspectiveCamera,
    DirectionalLight,
    AmbientLight,
    Mesh,
    WebGLRenderer
  } from "svelthree";
  
  import { Fog, BoxGeometry, MeshStandardMaterial } from "three";

  const fog = new Fog(0xffffff, 3, 11);
  const geometry = new BoxGeometry(1, 1, 1);
  const material = new MeshStandardMaterial();
 
</script>

<Canvas w={500} h={500} >

  <Scene id="scene1" bg={0xf0f9ff} props={{ fog }} env_tex={{ url: '...' }} >

    <PerspectiveCamera id="cam1" pos={[0, 0, 3]} lookAt={[0, 0, 0]} />
    <AmbientLight intensity={1.25} />
    <DirectionalLight pos={[3, 3, 3]} shadowMapSize={512*4} />

    <Mesh
      geometry
      material
      mat={{ color: 0xff3e00, metalness: 1, roughness: 0, envMapIntensity: 0.8 }}
      pos={[0, 0, 0]}
      rot={[0.5, 0.6, 0]}
      scale={[1, 1, 1]}
      receiveShadow
      castShadow
      />

  </Scene>

  <WebGLRenderer
    sceneId="scene1"
    camId="cam1"
    mode="always"
    config={{ antialias: true, alpha: false }}
    shadowmap
    />

</Canvas>