Three.js & Vue.js Viewport Component for 3D App

Install & Download:

# NPM
$ npm install three-vue-viewport --save

Description:

This Vue.js component helps make it easier to use Three.js in your applications. The component creates its own camera and renderer (either perspective or orthographic), and uses a global Three.js scene in your Vuex store.

Basic usage:

// Libraries:
import Stats from "stats-js";
import Vue from "vue";
import Vuex from "vuex";
import * as Three from "three";
// Components:
import Frame from "./components/Frame.js";
// Data:
import Store from "./store";
let cube;
window.onload = function() {
  new Vue({
    el: "#v-wrapper",
    store: Store,
    data: function() {
      return {
        windowWidth: 0,
        windowHeight: 0
      };
    },
    render: h => h( Frame ),
    beforeMount() {
      window.addEventListener("resize", this.getWindowWidth );
      window.addEventListener("resize", this.getWindowHeight );
    },
    mounted: function() {
      this.$nextTick(function() {
        // Build the Three.js scene:
        let geometry = new Three.BoxGeometry( 1, 1, 1 );
        let material = new Three.MeshBasicMaterial({ color: 0x00ff00 });
        cube = new Three.Mesh( geometry, material );
        cube.name = "myCube";
        Store.state.scene.add( cube );
        setInterval( loop, 1000 / 60 );
      });
    },
    beforeDestroy() {
      window.removeEventListener("resize", this.getWindowWidth );
      window.removeEventListener("resize", this.getWindowHeight );
    },
    methods: {
      getWindowWidth: function( e ) {
        this.windowWidth = document.documentElement.clientWidth;
      },
      getWindowHeight: function( e ) {
        this.windowHeight = document.documentElement.clientHeight;
      }
    }
  });
};

// Deterministic loop:
function loop() {
  cube.rotation.z += 0.05;
}

Preview: