3.0.4 • Published 5 years ago

vue-use-three v3.0.4

Weekly downloads
3
License
MIT
Repository
github
Last release
5 years ago

vue-use-three

Build status Coverage Dependencies Dev dependencies Peer dependencies NPM License

🚀 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.

  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. 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 -->
<script src="https://unpkg.com/vue-use-three@vue3"></script> 

<!-- Vue 2 -->
<script src="https://unpkg.com/vue-use-three@vue2"></script>

⚡ Compositions

  • useDisposable — Bind a disposable object to a component's lifecycle
  • useNesting — Create a 3D nesting context
  • usePosition — Sync an object's local position with a vector
  • useRotation — Sync an object's local rotation using Euler angles

useDisposable

This function binds disposable objects to the lifecycle of a component. When the component is destroyed, the object will be disposed of.

import { useDisposable } from 'vue-use-three';

export default {
  setup() {
    const geometry = new Geometry();
    const material = new Material();

    useDisposable(geometry, material);
  },
};

useNesting

Create a 3D nesting context.

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.

import { usePosition } from 'vue-use-three';

export default {
  setup(props) {
    const obj = new Object3D();
    
    usePosition(obj, () => props.position);
  },
  props: {
    position: Object,
  },
};

useRotation

Sync an object's local rotation using Euler angles.

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,
  },
};

🧩 Components

These components will cover common use cases for working with Three.js, and will primarily be built with the above composition functions.

<Group> (Planned)

A component to group child objects.

<Group>
  <!-- ... -->
</Group>

<PerspectiveCamera> (Planned)

Create a PerspectiveCamera to render a scene with.

<Scene>
  <PerspectiveCamera />
</Scene>

<Renderer> (Planned)

This component will be responsible for managing the WebGLRenderer context. It will also be responsible for managing child Scene components and all rendering. The renderer will also be responsible for the actual <canvas> DOM element.

<Renderer>
  <!-- ... -->
</Renderer>

<Scene> (Planned)

Scenes will mark a line in the sand between the DOM and our canvas. They will be "abstract" components, and will not render any child DOM elements. We'll use the bounding box of an outer <div> element to determine where to render out content. If the <div> is not within the viewport, the scene will not be rendered. This will allow for many scenes to exist within a single renderer.

<Renderer>
  <Scene>
    <!-- ... -->
  </Scene>
</Renderer>

📄 License

MIT

Copyright (c) 2020-present, Scott Bedard

3.0.7

5 years ago

2.0.7

5 years ago

3.0.6

5 years ago

2.0.6

5 years ago

2.0.5

5 years ago

3.0.5

5 years ago

3.0.4

5 years ago

2.0.4

5 years ago

3.0.3

5 years ago

2.0.3

5 years ago

3.0.2

5 years ago

2.0.2

5 years ago

0.0.1

5 years ago