https://github.com/janvorisek/drie
Drie is a Vue 3 component library for THREE.js made with TypeScript and Composition API.
https://github.com/janvorisek/drie
Last synced: 27 days ago
JSON representation
Drie is a Vue 3 component library for THREE.js made with TypeScript and Composition API.
- Host: GitHub
- URL: https://github.com/janvorisek/drie
- Owner: janvorisek
- License: mit
- Created: 2022-12-26T18:02:40.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-07-07T14:38:01.000Z (over 2 years ago)
- Last Synced: 2025-09-29T05:24:49.047Z (6 months ago)
- Language: Vue
- Size: 11.6 MB
- Stars: 76
- Watchers: 5
- Forks: 2
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - drie - A Vue 3 component library for three.js inspired by react-three-fiber. (Components & Libraries / UI Utilities)
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
Drie
Drie is a Vue 3 component library for [`three.js`](https://threejs.org/) inspired by `react-three-fiber` and `TroisJS`. It is made with TypeScript and Composition API.
Explore the docs
View Demo
·
Report Bug
·
Request Feature
[![Drie screenshot][product-screenshot]](https://www.drie.dev)
## Getting started
### Installation
Drie can be installed from npm and always supports the latest `three.js` version.
Note that you are supposed to install `three.js` yourself.
```shell
npm install @janvorisek/drie three #latest Drie & three.js
```
### Usage
The preffered way is to import the components as needed in the single file components.
```ts
import { Renderer, Scene } from "@janvorisek/drie"; // always needed
import { Mesh, BoxGeometry, MeshBasicMaterial } from "@janvorisek/drie"; // mesh
import { PerspectiveCamera, OrbitControls } from "@janvorisek/drie"; // camera
```
```html
```
### Vue 3 plugin
You can use Vue3 plugin to auto-import all the components.
Note that tree shaking is not available and the resulting bundle size may be huge.
```ts
import { createApp } from "vue";
import { install as installDrie } from 'drie';
import App from "./App.vue";
const app = createApp(App);
installDrie(app);
app.mount("#app");
```
[contributors-shield]: https://img.shields.io/github/contributors/janvorisek/drie.svg?style=for-the-badge
[contributors-url]: https://github.com/janvorisek/drie/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/janvorisek/drie.svg?style=for-the-badge
[forks-url]: https://github.com/janvorisek/drie/network/members
[stars-shield]: https://img.shields.io/github/stars/janvorisek/drie.svg?style=for-the-badge
[stars-url]: https://github.com/janvorisek/drie/stargazers
[issues-shield]: https://img.shields.io/github/issues/janvorisek/drie.svg?style=for-the-badge
[issues-url]: https://github.com/janvorisek/drie/issues
[license-shield]: https://img.shields.io/github/license/janvorisek/drie.svg?style=for-the-badge
[license-url]: https://github.com/janvorisek/drie/blob/master/LICENSE.txt
[product-screenshot]: images/screenshot.png
## Contributing
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Don't forget to give the project a star! Thanks again!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
Distributed under the MIT License. See [`LICENSE`](LICENSE) for more information.
## Contact
Jan Vorisek - [@janvorisekdev](https://twitter.com/janvorisekdev) - jan@vorisek.me
Project Link: [https://github.com/janvorisek/drie](https://github.com/janvorisek/drie)