vue-flat-surface-shader

A Vue component for flat surface shader.

View demo Download Source

How to use

npm install --save vue-flat-surface-shader

Main.js

import Vue from 'vue'
import FlatSurfaceShader from 'vue-flat-surface-shader'

Vue.use(FlatSurfaceShader)

App.vue file (simple example)

<template>
  <div id="app">
    <flat-surface-shader type="webgl" 
                         :light="{ambient: '#22bc9e', diffuse: '#2b7c6b'}"
                         width=2000
                         height=1000>
    </flat-surface-shader>
  </div>
</template>

App.vue file (advanced example)

<template>
  <div id="app">
    <flat-surface-shader class="shader"
                         type="canvas" 
                         :light="{ambient: '#22bc9e', diffuse: '#2b7c6b', draw: false}" 
                         :mesh="{segments: 4, slices: 4, width: 1.8, height: 1.8}">
    </flat-surface-shader>
  </div>
</template>
<style>
  html, body {
      margin: 0;
      padding: 0;
  }
  .shader {
      width: 100vw;
      height: 100vh;
  }
</style>

Props

1.Type

  • The type of shader's renderer, avaliable values are webgl, canvas, svg.
  • Prop type: String
  • Default value: webgl

GitHub