Vue.js components for reactive 3D rendering

Description:

The vue-gl provides a set of components to render 3D graphics using three.js library.Vue.js components rendering 3D graphics reactively via three.js

Install & Download:

# Yarn
$ yarn add vue-gl

# NPM
$ npm install vue-gl --save

Basic Usage:

Import the necessary libraries into the document.

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

Define objects.

<vgl-renderer id="vgl-canvas" style="width: 300px; height: 150px;">
    <vgl-scene>
        <vgl-sphere-geometry></vgl-sphere-geometry>
        <vgl-mesh-standard-material></vgl-mesh-standard-material>
        <vgl-mesh></vgl-mesh>
        <vgl-ambient-light></vgl-ambient-light>
        <vgl-directional-light></vgl-directional-light>
    </vgl-scene>
    <vgl-perspective-camera orbit-position="200 1 1"></vgl-perspective-camera>
</vgl-renderer>

Register components and start vue.

Object.keys(VueGL).forEach(name => {
  Vue.component(name, VueGL[name]);
});
new Vue({
  el: "#vgl-canvas"
});

Preview:

Download Details:

Author: vue-gl

Live Demo: https://vue-gl.github.io/vue-gl/

Download Link: https://github.com/vue-gl/vue-gl/archive/master.zip

Official Website: https://github.com/vue-gl/vue-gl

#vuejs #javascript #vue-js