threed_voc

简介

基于Three.js实现的VOC设备模型 Vue组件

使用教程

前提

Vue-cli 工程

版本

0.3.2

1. install

npm install threed_voc --save

2. main.js

import threedVoc from 'threed_voc'
Vue.use(threedVoc)

3.1 静态资源处理：vue-cli2 工程处理方式

1. 复制 threed_vod/dist/static 文件夹中的 model 和 texture 文件夹至项目本地 /static/ 文件夹中

3.2 静态资源处理：vue-cli3 工程处理方式

1. 组件增加 cliVersion='3' 属性（cliVersion默认为'2'）
2. 复制 threed_vod/dist/static 文件夹中的 model 和 texture 文件夹至项目本地 /public/ 文件夹中

4. 示例

<template>
  <div id="app">
    <button @click="stopFn">风扇状态</button>
    <button @click="actionRoomAir">开启喷漆房烟雾</button>
    <button @click="clearRoomAir">关闭喷漆房烟雾</button>
    <button @click="play_water">开启水帘效果</button>
    <button @click="clear_water">关闭水帘效果</button>
    <button @click="actionAir">开启烟气处理</button>
    <button @click="clear_air">关闭烟气处理</button>
    <button @click="play_all">排放大量烟气</button>
    <button @click="randomData">模拟面板数据</button>
    <button @click="actionBoardOne">控制面板显示</button>
    <button @click="changeValueColor">切换指标颜色</button>
    <three-voc
      ref="threeVoc"
      :data="data"
      :fanState="fanState"
      :oneColor="valueColor"
      :twoColor="valueColor"
      :threeColor="valueColor"
      :fourColor="valueColor"
      @onLoadSuccess="onloadSuccess"
    />
  </div>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      fanState: false,
      data: {},
      boardOne: true,
      valueColor: '#000000',
    }
  },
  methods: {
    stopFn () {
      this.fanState = !this.fanState;
    },
    actionAir () {
      this.$refs['threeVoc'].play_air()
    },
    clear_air () {
      this.$refs['threeVoc'].clear_air()
    },
    actionRoomAir () {
      this.$refs['threeVoc'].play_room_air()
    },
    clearRoomAir () {
      this.$refs['threeVoc'].clear_room_air()
    },
    play_water () {
      this.$refs['threeVoc'].play_water()
    },
    clear_water () {
      this.$refs['threeVoc'].clear_water()
    },
    actionBoardOne () {
      if (this.boardOne) {
        this.$refs['threeVoc'].hiden_board_one()
      } else {
        this.$refs['threeVoc'].show_board_one()
      }
      this.boardOne = !this.boardOne
    },
    play_all () {
      this.$refs['threeVoc'].play_all()
    },
    changeValueColor () {
      if (this.valueColor === '#000000') {
        this.valueColor = '#005BF2'
      } else {
        this.valueColor = '#000000'
      }
    },
    randomData () {
      this.$set(this.data, 'one', (Math.random() * 1000).toFixed(2))
      this.$set(this.data, 'two', (Math.random() * 1000).toFixed(2))
      this.$set(this.data, 'three', (Math.random() * 1000).toFixed(2))
      this.$set(this.data, 'four', (Math.random() * 1000).toFixed(2))
    },
    // 模型加载完成
    onloadSuccess (res) {
      console.info('load success:' + res.code)
    }
  }
}
</script>

<style scoped>
</style>

组件属性

| 属性 | 说明 | 默认 | | :-----| ----: | ----: | | cliVersion | vue脚手架版本 '2'和'3' | '2' | | airState | 默认是否排放烟气 | false | | fanState | 默认是否启动风机 | false | | data | 指标面板数据对象 | {one:'-',two:'-',three:'-',four:'-'} | | dataBoardBackColor | 指标面板:背景颜色 | '#4f5454' | | dataBoardLabelColor | 指标面板:名称字体颜色 | '#8b8f8f' | | dataBoardLabelSize | 指标面板:指标名称字体大小 | '11px' | | dataBoardValueSize | 指标面板:指标值字体大小 | '15px' | | oneColor | 指标面板:指标值1字体颜色 | '#000000' | | twoColor | 指标面板:指标值2字体颜色 | '#000000' | | threeColor | 指标面板:指标值3字体颜色 | '#000000' | | fourColor | 指标面板:指标值4字体颜色 | '#000000' | | nameBoardBackColor | 名称面板:背景颜色 | '#76797E' | | nameBoardLabelColor | 名称面板:字体颜色 | '#ffffff' | | airAllTime | 排放大量烟气执行时间（ms） | 40000 | | airAllInterval | 排放大量烟气执行频率（ms） | 300 | | cameraPosition| 视角位置 |{ x: 50, y: 50, z: 850 }|

组件方法

| 方法 | 说明 | | :-----| ----: | | play_room_air | 开启喷漆房烟气排放动画 | | clear_room_air | 关闭喷漆房烟气排放动画 | | play_water | 开启水帘流动动画 | | clear_water | 关闭水帘流动动画 | | play_air | 开启烟气排放动画 | | clear_air | 关闭烟气排放动画 | | play_all | 开启排放大量烟气动画 | | show_board_one | 显示面板 | | hiden_board_one | 隐藏面板 |

组件事件

| 事件 | 说明 | | :-----| ----: | | onLoadSuccess | 模型加载完成后调用 |

联系我们

http://www.zsplat.com