VueGL is a library configured for rendering 3D graphics using Vue.js and three.js. With VueGL, you can work with WebGL very easily. Additionally, drawn graphics are responsively re-displayed when data changes are detected.

Vue.js is one of the very popular frameworks for creating web applications or interactive websites. three.js is a 3D graphics library for WebGL use. WebGL wrapper classes provide APIs.

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-gl
# NPM
$ npm install vue-gl --save

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

<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"
});

See Demo And Download

Official Website(vue-gl): Click Here

This superior jQuery/javascript plugin is developed by vue-gl. For extra Advanced Usage, please go to the official website.