vuethree v18.6.1

VueThree

A Vue wrapper for THREE.

demo

Try it out!

dependencies

• Vue
• THREE

setup

npm

npm install vuethree

ES module

Register the components globally.

import Vue from 'vue';
import VueThree from 'vuethree';

Vue.use(VueThree);

or

Register the components in the scope of another instance.

import VueThree from 'vuethree';

export default {
  // ...
  components: {
    [VueThree.Renderer.name]: VueThree.Renderer,
    [VueThree.Object.name]: VueThree.Object,
    [VueThree.Scene.name]: VueThree.Scene,
  },
};

browser

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/three"></script>
<script src="https://unpkg.com/vuethree"></script>

If Vue is detected, the components will be registered automatically.

usage

<vue-three-renderer clear-color="#00ff00">
  <vue-three-scene>
    <vue-three-fog color="#ff0000"/>
    <vue-three-perspective-camera
      :fov="75"
      :position="cameraPosition"
      :quaternion="cameraQuaternion"
    />
    <component
      v-for="threeObject in threeObjects"
      :key="threeObject.key"
      :is="threeObject.component"
      v-bind="threeObject.props"
    />
    <vue-three-point-light
      :decay="2"
      :position="[50, 0, 0]"
    />
  </vue-three-scene>
</vue-three-renderer>

Create custom Vue THREE components.

let MySphere = {
  mixins: [VueThree.Object],

  props: {
    color: {},
  },

  computed: {
    object() {
      return new THREE.Mesh(
        new THREE.SphereBufferGeometry(1/2, 24, 24),
        new THREE.MeshStandardMaterial({metalness: 2/3, roughness: 2/3}),
      );
    },
  },

  created() {
    this.$watch(function() {
      this.object.material.emissive.set(this.color);
    });
  },

  methods: {
    dispose(object) {
      object.geometry.dispose();
      object.material.dispose();
    },
  },
};

components

Renderer

properties

Object

properties

Scene

Fog

name

vue-three-fog

properties

PerspectiveCamera

properties

PointLight

properties