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

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:

Download Details:

Author: ianpaschal

Live Demo: https://github.com/ianpaschal/three-vue-viewport/tree/master/example

Download Link: https://github.com/ianpaschal/three-vue-viewport/archive/master.zip

Official Website: https://github.com/ianpaschal/three-vue-viewport

Install & Download:

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