vue组件 .vue_用于平面着色器的Vue组件

vue组件 .vue

Vue平面着色器 (vue-flat-surface-shader)

A Vue component for flat surface shader.

用于平面着色器的Vue组件。

View demo 查看演示 Download Source 下载源

如何使用 (How to use)

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

Main.js (Main.js)

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

Vue.use(FlatSurfaceShader)

App.vue文件(简单示例) (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文件(高级示例) (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.类型 (1.Type)

• The type of shader's renderer, avaliable values are webgl, canvas, svg.

  着色器渲染器的类型，可用的值为webgl ， canvas和svg 。

• Prop type: String

  道具类型： String

• Default value: webgl

  默认值： webgl

翻译自: https://vuejsexamples.com/a-vue-component-for-flat-surface-shader/

vue组件 .vue