Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vatro/svelthree
Create three.js content using Svelte components.
https://github.com/vatro/svelthree
svelte svelte-accmod sveltejs svelthree threejs
Last synced: 1 day ago
JSON representation
Create three.js content using Svelte components.
- Host: GitHub
- URL: https://github.com/vatro/svelthree
- Owner: vatro
- License: mit
- Created: 2020-06-03T21:30:42.000Z (over 4 years ago)
- Default Branch: dev
- Last Pushed: 2024-09-06T23:21:31.000Z (4 months ago)
- Last Synced: 2025-01-03T12:08:34.676Z (8 days ago)
- Topics: svelte, svelte-accmod, sveltejs, svelthree, threejs
- Language: Svelte
- Homepage:
- Size: 4.09 MB
- Stars: 485
- Watchers: 14
- Forks: 15
- Open Issues: 65
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-svelte - svelthree - Component library for declarative construction of reactive and reusable three.js scene graphs. (Utilities / WebGL)
README
# svelthree
#### Create three.js content using Svelte components.
| IMPORTANT REMARK |
| -------|
|`svelthree` is now **"default Svelte first"** (_not "`svelte-accmod` first" as before_), thus **`accessors`usage is not recommended** because of various reasons related to accessors updating components synchronously which can lead to unwanted behavior, bugs and perfomance issues. So if you're using component references and wish to set props programmatically, please use the default `$set` method, e.g. `comp_ref.$set({pos: [1,2,3]})`, which is asynchronous / scheduled. If you still want to access `svelthree`-components via `accessors` syntax, e.g. `comp_ref.pos = [1,2,3]`, please import accessors-enabled components from `svelthree/acc` which will then have correct / better type definitions.
_I still like the developer experience with `svelte-accmod` a bit better, but it comes with some other, currently still unsolved issues and an inevitable perfomance loss compared to using the `$set` method. Although `svelthree` is now "default Svelte first", `svelte-accmod` is still something I'll get my hands on again in future._ |
---
### How to try latest svelthree NOW ?
- **clone the svelthree repo**
e.g. using [degit](https://github.com/Rich-Harris/degit): `npx degit vatro/svelthree`
- **create a svelthree-tarball and save it somewhere** *(see [npm pack](https://docs.npmjs.com/cli/v7/commands/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 SvelteKit-project (see [`create-svelte`](https://www.npmjs.com/package/create-svelte)) add `"svelthree"` to `"devDependencies"` inside `package.json` file:
```
"devDependencies": {
...
"svelthree": "file:../some_directory/svelthree-1.0.0-next.0.98.tgz",
...
}
```
... and **run** `npm i` (*this will actually install `svelthree` and if not already installed: `three` incl. `@types/three`*)
- 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
Create [three.js](https://threejs.org/) content using [Svelte](https://svelte.dev/docs) components.
👨🏻💻 Please keep in mind that updates may come frequently and include breaking changes.
### Install
In your **SvelteKit** project:
- install **three.js** along with **three.js types**
```
npm i -D three @types/three
```
- install **svelthree**
```
npm i -D svelthree@next
```
**Note:** If you don't install a specific Svelte or three.js version, the latest supported *Svelte* and *three.js* (incl. types) versions will be automatically installed as *svelthree's* peer dependencies.
### Quickstart
- ***todo**: create new svelthree-app (publish after svelthree 1.0.0-next.1 release)*
### General Usage
- ***todo**: new Vercel hosted SvelteKit website with some cool examples*
### Examples
- ***todo**: new Vercel hosted SvelteKit website incl. REPL*
### Usage Example
```svelte
import {
Canvas,
Scene,
PerspectiveCamera,
DirectionalLight,
AmbientLight,
Mesh,
WebGLRenderer
} from "svelthree";
import { Fog, BoxGeometry, MeshStandardMaterial } from "three";
const fog = new Fog(0xffffff, 3, 11);
const geometry = new BoxGeometry(1, 1, 1);
const material = new MeshStandardMaterial();
```