# threed_voc

> 3D(three.js) model for voc

Latest version **0.3.2** (published 2021-11-26) · 0 weekly downloads

## Install

```sh
npm install threed_voc
pnpm add threed_voc
yarn add threed_voc
bun add threed_voc
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; large bundle; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2021-11-26 |
| First published | 2021-11-11 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 59.2 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | zangy |

## Links

- npm: https://www.npmjs.com/package/threed_voc
- npm.io page: https://npm.io/package/threed_voc

## Dependencies (6)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [three](https://npm.io/package/three.md) ^0.134.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [stats-js](https://npm.io/package/stats-js.md) ^1.0.1
- [three-orbitcontrols](https://npm.io/package/three-orbitcontrols.md) ^2.110.3
- [three-obj-mtl-loader](https://npm.io/package/three-obj-mtl-loader.md) ^1.0.3

## Recent versions

- 0.3.2 (latest) — 2021-11-26
- 0.3.1 — 2021-11-26
- 0.3.0 — 2021-11-25
- 0.2.2 — 2021-11-19
- 0.2.1 — 2021-11-19
- 0.2.0 — 2021-11-18
- 0.1.6 — 2021-11-12
- 0.1.5 — 2021-11-12
- 0.1.4 — 2021-11-12
- 0.1.3 — 2021-11-12
- 0.1.2 — 2021-11-11
- 0.1.1 — 2021-11-11
- 0.1.0 — 2021-11-11

## README

# threed_voc
## 简介
基于Three.js实现的VOC设备模型 Vue组件
## 使用教程
### 前提
Vue-cli 工程

### 版本
0.3.2

### 1. install
```shell
npm install threed_voc --save
```
### 2. main.js
```javascript
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. 示例
```javascript
<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

---
_Source: https://npm.io/package/threed_voc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._