svelthree

Svelte powered three.js development

---

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)

  e.g. run npm pack --pack-destination ../some_directory/

• install the created svelthree-tarball

  e.g. in your existing Svelte-project add "svelthree" to "devDependencies" inside package.json file:

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

  ... and run npm i (this will actually install svelthree)

• patch original (installed) Svelte to svelte-accmod

  run: npx svelte-accmod-patch

• 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

Svelte components library for declarative construction of reactive and reusable three.js scene graphs using a modified version of Svelte svelte-accmod under the hood. 👨🏻‍💻 Please keep in mind that updates may come frequently and include breaking changes.

Install

​ In your Svelte 3.44.2 - 3.48.0 project (also SvelteKit):

• install three.js along with three.js types (if available):

  npm i -D three @types/three
  

• install svelthree and patch Svelte to svelte-accmod

  npm i -D svelthree@next
  

  npx svelte-accmod-patch
  

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

Quickstart

• todo: create new svelthree-app-rollup template -> CSR/SPA (publish after svelthree 1.0.0-next.1 release)
• todo: create new svelthree-app-vite template -> CSR/SPA (publish after svelthree 1.0.0-next.1 release)
• todo: create new svelthree-app-sveltekit template -> SSR + CSR/SPA (publish after svelthree 1.0.0-next.1 release)

General Usage

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

REPL Usage

todo (?): with the new Vercel hosted SvelteKit website -> implement REPL (not quite not sure about this though... probably just for people to play around, without login / saving?)

Usage Example

<!-- HelloCube.svelte -->

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

  const fog = new Fog(0xffffff, 3, 11);
  const geometry = new BoxBufferGeometry(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"
    config={{ antialias: true, alpha: false }}
    enableShadowMap
    />

</Canvas>