Awesome Open Source
Awesome Open Source

svelthree

Svelte powered three.js development

Svelte components library for declarative construction of reactive and reusable three.js scene graphs utilizing three.js source in a slightly modified version svelthree-three.

👨🏻‍💻 Keep in mind that svelthree is still in an early "proof of concept" development phase and many cool features are yet to be added, so the API may change in future releases while always aiming to provide a rich feature stack along with the best possible developer experience.

Install

npm i svelthree --save-dev

Quickstart

Svelthree components' code is written in TypeScript. You can set up a new Svelte TypeScript project (official) like this:

npx degit sveltejs/template svelte-typescript-app
cd svelte-typescript-app
node scripts/setupTypeScript.js

After that install svelthree by executing npm i svelthree --save-dev in your project folder. That's it! ğŸŽ‰ 🍦 You don't have to write TypeScript in order to use svelthree-components, change <script lang="ts"> to <script> and do it VanillaJS!

General Usage

Visit svelthree.dev for usage examples, API coming soon, FAQ and a REPL playground! ğŸ˜Ž

REPL Usage

You can try out svelthree without installing anything in a Svelte REPL environment:

see svelte.dev REPL

see svelthree.dev REPL

☝️ but here you have to import from "https://unpkg.com/[email protected]/dist/svelthree.mjs"

Usage Example

<!-- HelloCube.svelte -->

<script>
  import {
    Canvas,
    Scene,
    PerspectiveCamera,
    DirectionalLight,
    AmbientLight,
    BoxBufferGeometry,
    Mesh,
    MeshStandardMaterial,
    WebGLRenderer,
  } from "svelthree"; // or from "https://unpkg.com/[email protected]/dist/svelthree.mjs" in REPL

  let cubeGeometry = new BoxBufferGeometry(1, 1, 1);
  let cubeMaterial = new MeshStandardMaterial();
</script>

<Canvas let:sti w={500} h={500}>

  <Scene {sti} let:scene id="scene1" props={{ background: 0xedf2f7 }}>

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

    <Mesh
      {scene}
      geometry={cubeGeometry}
      material={cubeMaterial}
      mat={{ roughness: 0.5, metalness: 0.5, color: 0xff3e00 }}
      pos={[0, 0, 0]}
      rot={[0.5, 0.6, 0]}
      scale={[1, 1, 1]} />

  </Scene>

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

</Canvas>

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
svelte (257) 
threejs (240) 
sveltejs (40)