Skip to content

vatro/svelthree

dev
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Sep 8, 2022
Feb 1, 2022

IN CASE YOU'RE HERE BECAUSE YOU WERE LOOKING FOR SVELTE THREE SOMETHING:

There's a (pretty) new three.js component library for Svelte: threlte website / threlte repo which is (atm) more complete and polished compared to svelthree.

Although threlte's completeness and strong community support could demotivate me concerning further svelthree development, I'm going to continue working on svelthree because it's my baby and I love it 🥰. Also: the API / DX / capability is / will be different to threlte in quite a few ways, especially with threlte 5 (recent) release moving in a completely different direction towards being basically a Svelte-version of react-three-fiber, and I think it's always good to have some alternatives.

Anyways, I'm glad you're here! 🙂 Try svelthree, stay tuned 🚀 & leave a star! 😁👋


svelthree

Create three.js content with 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 Svelte-project add "svelthree" to "devDependencies" inside package.json file:

    "devDependencies": {
        ...
        "svelthree": "file:../some_directory/svelthree-1.0.0-next.0.97.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.49.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"
    mode="always"
    config={{ antialias: true, alpha: false }}
    shadowmap
    />

</Canvas>