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.

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.

<script setup lang="ts">
import { Renderer, Scene } from "@janvorisek/drie"; // always needed
import { Mesh, BoxGeometry, MeshBasicMaterial } from "@janvorisek/drie"; // mesh
import { PerspectiveCamera, OrbitControls } from "@janvorisek/drie"; // camera
</script>

<template>
  <div class="example">
    <Renderer ref="renderer" :antialias="true">
      <PerspectiveCamera :up="[0, 0, 1]">
        <OrbitControls />
      </PerspectiveCamera>
      <Scene background="#f9f9f9">
        <Mesh>
          <MeshBasicMaterial color="blue" />
          <BoxGeometry :width="15" :height="10 " />
        </Mesh>
      </Scene>
    </Renderer>
  </div>
</template>

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.

import { createApp } from "vue";
import { install as installDrie } from 'drie';
import App from "./App.vue";

const app = createApp(App);
installDrie(app);
app.mount("#app");

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!

Fork the Project
Create your Feature Branch (git checkout -b feature/AmazingFeature)
Commit your Changes (git commit -m 'Add some AmazingFeature')
Push to the Branch (git push origin feature/AmazingFeature)
Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Jan Vorisek - @janvorisekdev - jan@vorisek.me

Project Link: https://github.com/janvorisek/drie

janvorisek / drie

readme