All Projects → vatro → Svelthree

vatro / Svelthree

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

Projects that are alternatives of or similar to Svelthree

Vox2
Simple POC of PCG voxel-engine
Stars: ✭ 133 (-7.64%)
Mutual labels:  threejs
Fabscanpi Server
FabScan Pi Open Source 3D Scanner - Server application
Stars: ✭ 137 (-4.86%)
Mutual labels:  threejs
Svelte Carousel
A super lightweight, super simple Carousel for Svelte 3
Stars: ✭ 144 (+0%)
Mutual labels:  svelte
Sketch
Explorations on cross-hatching, engraving, and similar non-photorealistic rendering.
Stars: ✭ 136 (-5.56%)
Mutual labels:  threejs
Routify Starter
Stars: ✭ 137 (-4.86%)
Mutual labels:  svelte
Svelte Data Grid
Lightweight and powerful data grid for svelte
Stars: ✭ 139 (-3.47%)
Mutual labels:  svelte
Tsparticles
tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
Stars: ✭ 2,694 (+1770.83%)
Mutual labels:  svelte
Notus Svelte
Notus Svelte: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 144 (+0%)
Mutual labels:  svelte
Xsm
State Management made eXtraordinarily simple and effective for Angular, React, and Vue
Stars: ✭ 138 (-4.17%)
Mutual labels:  svelte
Yrv
Your routing! (for Svelte)
Stars: ✭ 143 (-0.69%)
Mutual labels:  svelte
Mine.js
🌏 A Minecraft-like voxel engine built in Javascript. (formerly mc.js)
Stars: ✭ 136 (-5.56%)
Mutual labels:  threejs
R3f Next Starter
Repo is moving to https://github.com/pmndrs/react-three-next
Stars: ✭ 137 (-4.86%)
Mutual labels:  threejs
Interactive Repulsive Effect
🍫 An interactive repulsion effect of grid items as seen in BestServedBold's Dribbble shot "Holographic-Interactions".
Stars: ✭ 141 (-2.08%)
Mutual labels:  threejs
Studio
An authoring platform to build Web Augmented Reality experiences, without coding knowledge
Stars: ✭ 135 (-6.25%)
Mutual labels:  threejs
3d Force Graph
3D force-directed graph component using ThreeJS/WebGL
Stars: ✭ 2,386 (+1556.94%)
Mutual labels:  threejs
Tweetscape
A WebVR experience displaying tweets in real-time along a 3D timeline
Stars: ✭ 132 (-8.33%)
Mutual labels:  threejs
React Globe.gl
React component for Globe Data Visualization using ThreeJS/WebGL
Stars: ✭ 139 (-3.47%)
Mutual labels:  threejs
Ego
A lightweight decision making library for game AI.
Stars: ✭ 145 (+0.69%)
Mutual labels:  threejs
Magic Microservices
Write components in any way, use them everywhere.😘
Stars: ✭ 145 (+0.69%)
Mutual labels:  svelte
Sb Admin Svelte
StartBootstrap SB Admin rebuilt using Svelte + Sveltestrap
Stars: ✭ 143 (-0.69%)
Mutual labels:  svelte

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>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].