### zj-three-model

这是一个显示stl格式模型的组件

### 安装

没有规定什么版本  当前用的是0.139.2版本

```shell
npm i three
```



### 基本用法

全部代码

```vue
<template>
   <div>
       <zj-three-model :stlData="stlData" :cameraSet="cameraSet" ></zj-three-model>
   </div>
</template>

<script>
    import ZjThreeModel from 'zj-three-model'
    export default {
        components: {
            ZjThreeModel,
        },
        data() {
            return{
                stlData: {
                    url: '/MTTU.stl',
                    type: 'stl',
                    scale: {x: 1, y: 1, z: 1},
                    position: {x: 0, y: 0, z: 0},
                    rotation: {x: 0, y: 0, z: 0},
                    materialColor: 0xffffff,
                    dotSize: 0.1,
                    materialType: 'mesh',//point/line
                    side: 'back', //front//back/double
                },
                cameraSet: {
                    camera_position_set: {x: 0, y: 5, z: 5},
                    camera_lookAt: {x: 0, y: 0, z: 0},
                },
            }
        },
    }
</script>

<style>
    #container {
      position: absolute;
      width: 100%;
      height: 100%;
    }
</style>
```



### zj-three-model Attributes

| 参数      | 说明       | 类型   | 可选值 | 默认值 |
| --------- | ---------- | ------ | ------ | ------ |
| stlData   | 模型的数据 | Object | -      | -      |
| cameraSet | 相机的数据 | Object | -      | -      |



### stlData Attributes

| 参数          | 说明                               | 类型     | 可选值                | 默认值             |
| ------------- | ---------------------------------- | -------- | --------------------- | ------------------ |
| url           | 模型的静态地址                     | String   | -                     | -                  |
| type          | 模型类型 但这个组件仅仅显示stl模型 | String   | -                     | -                  |
| scale         | 模型的缩放比例                     | Object   | -                     | {x: 1, y: 1, z: 1} |
| position      | 模型的位置                         | Object   | -                     | {x: 0, y: 0, z: 0} |
| rotation      | 旋转轴                             | Object   | -                     | {x: 0, y: 0, z: 0} |
| materialColor | 材质颜色                           | 十六进制 | -                     | 0xff0000           |
| dotSize       | 点模型点的大小                     | Number   | -                     | -                  |
| materialType  | 显示材料的类型点、线、面           | String   | mesh \| point \| line | -                  |
| side          | 材料单面显示还是双面显示           | String   | front\|back\|double   | true               |

### cameraSet Attributes

| 参数                | 说明         | 类型   | 可选值 | 默认值 |
| ------------------- | ------------ | ------ | ------ | ------ |
| camera_position_set | 照相机的位置 | Object | -      | -      |
| camera_lookAt       | 相机的朝向   | Object | -      | -      |