Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scottbedard/vue-use-three
An experimental integration of Vue's composition API and Three.js
https://github.com/scottbedard/vue-use-three
Last synced: 2 months ago
JSON representation
An experimental integration of Vue's composition API and Three.js
- Host: GitHub
- URL: https://github.com/scottbedard/vue-use-three
- Owner: scottbedard
- License: mit
- Created: 2020-04-02T20:17:47.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:45:42.000Z (almost 2 years ago)
- Last Synced: 2024-10-26T05:43:38.100Z (2 months ago)
- Language: TypeScript
- Size: 1.43 MB
- Stars: 6
- Watchers: 3
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-use-three
[](https://github.com/scottbedard/vue-use-three/actions)
[](https://codecov.io/gh/scottbedard/vue-use-three)
[](https://david-dm.org/scottbedard/vue-use-three)
[](https://david-dm.org/scottbedard/vue-use-three?type=dev)
[](https://david-dm.org/scottbedard/vue-use-three?type=peer)
[](https://www.npmjs.com/package/vue-use-three)
[](https://github.com/scottbedard/vue-use-three/blob/master/LICENSE)
## 🚀 Project Goals
The primary goal of this library is to ease the pain in creating apps with [Vue.js](https://vuejs.org/) and [Three.js](https://threejs.org/). Several frameworks have demonstrated that components are great for managing [3D scene graphs](https://threejsfundamentals.org/threejs/lessons/threejs-scenegraph.html), but have a couple of drawbacks.
1. **Components are often too high-level.** This is fine for common things like scenes, lighting, and cameras, but becomes a pain when building custom components. With composition functions, we hope to solve this by providing behaviors that can be spread into components as needed, rather than proving the entire component itself.
2. **It's too easy to make mistakes.** A good example of this is [disposing of 3D objects](https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects). With composition functions, these mental burdens can be abstracted away and managed within component lifecycles.
> **Warning:** This project is _very_ experimental, things may change at any time.
## 📦 Installation
This library is designed to work with Vue 3, or with Vue 2 via the [composition API polyfill](https://github.com/vuejs/composition-api).
```bash
# Vue 3
$ npm install vue-use-three@vue3
# Vue 2
$ npm install vue-use-three@vue2 @vue/composition-api
```
When using with Vue 2, make sure to [register the composition API plugin](https://github.com/vuejs/composition-api#usage) before using Three.js compositions.
Alternatively, the library can be accessed via CDN.
```html
```
## âš¡ Compositions
- [`useDisposable`](#usedisposable) — Bind a disposable object to a component's lifecycle
- [`useNesting`](#usenesting) — Create a 3D nesting context
- [`usePosition`](#useposition) — Sync an object's local position with a vector
- [`useRenderer`](#userenderer) - Manage a WebGLRenderer
- [`useRotation`](#userotation) — Sync an object's local rotation using Euler angles
- [`useScene`](#usescene) - Manage a scene
#### `useDisposable`
This function binds [disposable objects](https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects) to the lifecycle of a component. When the component is destroyed, the object will be disposed of. If the object to be disposed is not created durinig the setup call, use a function to lazily dispose of the object.
```js
import { useDisposable } from 'vue-use-three';
export default {
setup() {
// normal disposal
const geometry = new Geometry();
// lazy disposal
let material;
onMounted(() => {
material = new Material;
});
useDisposable(geometry, () => material);
},
};
```
#### `useNesting`
Create a 3D nesting context.
```js
import { useNesting } from 'vue-use-three';
export default {
setup() {
const obj = new Object3D();
useNesting(obj);
},
};
```
#### `usePosition`
Sync an object's local position with a vector.
```js
import { usePosition } from 'vue-use-three';
export default {
setup(props) {
const obj = new Object3D();
usePosition(obj, () => props.position);
},
props: {
position: Object,
},
};
```
#### `useRenderer`
This composition is responsible for managing a [`WebGLRenderer`](https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer) context. It is designed to work with [`useScene`](#usescene) via a provide/inject relationship.
```js
import { WebGLRenderer } from 'three';
import { useRenderer } from 'vue-use-three';
export default {
setup() {
const renderer = new WebGLRenderer();
const {
empty, // computed property determining if there are scenes
getScenes, // method to return array of scenes
} = useRenderer(renderer);
return {
empty,
getScenes,
};
},
};
```
#### `useRotation`
Sync an object's local rotation using Euler angles.
```js
import { useRotation } from 'vue-use-three';
export default {
setup() {
const obj = new Object3D();
// radians (default)
useRotation(obj, () => props.rotation);
// degrees
useRotation(obj, () => props.rotation, { unit: 'degrees' });
},
props: {
rotation: Object,
},
};
```
#### `useScene`
This composition manages a [`Scene`](https://threejs.org/docs/index.html#api/en/scenes/Scene). It is designed to work with [`useRenderer`](#userenderer) via a prodive/inject relationship.
```js
import { Scene } from 'three';
import { useScene } from 'vue-use-three';
export default {
setup() {
const scene = new Scene();
useScene(scene);
},
};
```
## 📄 License
[MIT](https://github.com/scottbedard/vue-use-three/blob/master/LICENSE)
Copyright (c) 2020-present, Scott Bedard