Need help with svelthree?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

vatro
136 Stars 4 Forks MIT License 94 Commits 20 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

No Data

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




  

<perspectivecamera id="cam1" pos="{[0," lookat="{[0,"></perspectivecamera>
<ambientlight intensity="{1.25}"></ambientlight>
<directionallight pos="{[3,"></directionallight>

<mesh geometry="{cubeGeometry}" material="{cubeMaterial}" mat="{{" roughness: metalness: color: pos="{[0," rot="{[0.5," scale="{[1,"></mesh>

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.