threed_voc

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