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.