threed_voc v0.3.2

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>

组件属性

组件方法

组件事件

联系我们

http://www.zsplat.com