Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/solidjs-community/solid-three
port of @react-three/fiber for solid
https://github.com/solidjs-community/solid-three
react-three-fiber solid solidjs threejs webgl webxr
Last synced: 6 days ago
JSON representation
port of @react-three/fiber for solid
- Host: GitHub
- URL: https://github.com/solidjs-community/solid-three
- Owner: solidjs-community
- Created: 2022-04-24T03:10:42.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-28T15:49:46.000Z (8 months ago)
- Last Synced: 2024-10-29T22:31:33.376Z (3 months ago)
- Topics: react-three-fiber, solid, solidjs, threejs, webgl, webxr
- Language: TypeScript
- Homepage: https://solid-three.vercel.app
- Size: 5.45 MB
- Stars: 130
- Watchers: 7
- Forks: 13
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# solid-three
[](https://pnpm.io/)
Solid-three is a port of [React-three-fiber](https://github.com/pmndrs/react-three-fiber) to [SolidJS](https://www.solidjs.com/),
originally created by [Nikhil Saraf](https://github.com/nksaraf).
It allows you to declaratively construct a [Three.js](https://threejs.org/)
scene, with reactive primitives, just as you would construct a DOM tree in SolidJS.
> **Note** This library has just been published to NPM from this repo.
> It is still in early development, and is not yet ready for production use.
> Please feel free to try it out and report any issues you find!
## Quick start
Install it:
```bash
npm i solid-three
# or
yarn add solid-three
# or
pnpm add solid-three
```
Use it:
```tsx
import { Canvas } from 'solid-three'
```
### Dev Container
If you are using VSCode on windows (or just prefer to develope in a container), you can use the included dev container to get started quickly.
1. Clone this repo to a directory _inside of your wsl instance_ such as `~/Github`
2. Navigate to the `solid-three` directory and run `code .`
3. Open the workspace from the provided file.
4. Make sure the [DevContainers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) extension is installed Click the bottom left corner of the window and select `Reopen in Container` - if the extension is installed, vscode should prompt you to open the project in a dev container when you open the workspace file.
#### Dev Container Notes
- We clone into the `wsl` instance because the dev container is running a linux container, and the windows filesystem will cause extreme performance loss due to IO overhead.
- If you are using a different shell, you may need to modify the `devcontainer.json` file to use your shell of choice.
- A port will automatically be forwarded when you run the project in dev mode, so you can access the dev server from your browser on windows at `localhost:` - the port will be displayed in the terminal when you run the project. This can be configured by you as well.
## Documentation
> **Note**: Coming Soon!
## Sample Applications
> **Note**: More Coming Soon!
### solid-three-template
This is a template for a SolidJS application that uses solid-three.
This project is a bare-bones `Vite` project that has been configured to use `SolidJS`, `solid-three`, and `ESLint` with `Prettier` for formatting.
[solid-three-template](https://github.com/ZanzyTHEbar/solid-three-template)
## Contributing
> **Note**: Coming Soon!