vue-use-three
🚀 Project Goals
The primary goal of this library is to ease the pain in creating apps with Vue.js and Three.js. Several frameworks have demonstrated that components are great for managing 3D scene graphs, but have a couple of drawbacks.
- 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.
- It's too easy to make mistakes. A good example of this is disposing of 3D 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.
# 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 before using Three.js compositions.
Alternatively, the library can be accessed via CDN.
<!-- Vue 3 --> <!-- Vue 2 -->
⚡ Compositions
useDisposable
— Bind a disposable object to a component's lifecycleuseNesting
— Create a 3D nesting contextusePosition
— Sync an object's local position with a vectoruseRenderer
- Manage a WebGLRendereruseRotation
— Sync an object's local rotation using Euler anglesuseScene
- Manage a scene
useDisposable
This function binds disposable 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.
; { // normal disposal const geometry = ; // lazy disposal let material; ; ; };
useNesting
Create a 3D nesting context.
; { const obj = ; ; };
usePosition
Sync an object's local position with a vector.
; { const obj = ; ; } props: position: Object ;
useRenderer
This composition is responsible for managing a WebGLRenderer
context. It is designed to work with useScene
via a provide/inject relationship.
;; { const renderer = ; const empty // computed property determining if there are scenes getScenes // method to return array of scenes } = ; return empty getScenes ; };
useRotation
Sync an object's local rotation using Euler angles.
; { const obj = ; // radians (default) ; // degrees ; } props: rotation: Object ;
useScene
This composition manages a Scene
. It is designed to work with useRenderer
via a prodive/inject relationship.
;; { const scene = ; ; };
📄 License
Copyright (c) 2020-present, Scott Bedard