vue-flat-surface-shader
A Vue component for flat surface shader
DEMO: Github Pages
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
2. Light
A Light is composed of a 3D position Vector and 2 Color objects defining its ambient & diffuse emissions. These color channels interact with the Material of a Mesh to calculate the color of a Triangle.
For detailed explanation, see http://wagerfield.github.io/flat-surf… and https://github.com/wagerfield/flat-surface-shader
Name | Type | Default |
---|---|---|
count | Number | 2 |
xyScalar | Number | 1 |
zOffset | Number | 100 |
ambient | String | '#880066' |
diffuse | String | '#FF8800' |
speed | Number | 0.001 |
gravity | Number | 1200 |
dampening | Number | 0.95 |
minLimit | Number | 10 |
maxLimit | Number | null |
minDistance | Number | 20 |
maxDistance | Number | 400 |
autopilot | Boolean | false |
draw | Boolean | true |
3. Mesh
A Mesh is constructed from a Geometry object and a Material object. All the Triangles within the Geometry are rendered using the properties of the Material:
- Geometry is simply a collection of triangles – nothing more.
- A Material is composed of 2 Color objects which define the ambient & diffuse properties of a surface.
- A Triangle is constructed from 3 Vertices which each define the x, y and z coordinates of a corner.
For detailed explanation, see http://wagerfield.github.io/flat-surf… and https://github.com/wagerfield/flat-surface-shader
Name | Type | Default |
---|---|---|
width | Number | 1.2 |
height | Number | 1.2 |
depth | Number | 10 |
segments | Number | 16 |
slices | Number | 8 |
xRange | Number | 0.8 |
yRange | Number | 0.1 |
zRange | Number | 1.0 |
ambient | String | '#555555' |
diffuse | String | '#FFFFFF' |
speed | Number | 0.002 |
Development Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
For detailed explanation on how things work, consult the docs for vue-loader.
License
Licensed under MIT.