Render 3D Graphics In Vue.js App – vue-gl

Install & Download:

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

Description:

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

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:

Changelog:

v1.0.0 (08/24/2021)

• feat: drastic new drawing syntax and strategy

v0.23.1 (03/06/2021)

• fix: removes SphericalRefrectionMapping constant

v0.23.0 (03/02/2021)

• Update Three.js version to 0.126.0
• Tag name of components
• Update example codes
• Updates caniuse-lite

v0.22.1 (08/29/2020)

• Fixes an error on beforeDestroy hook when the material prop is not defined