zj-three-model
这是一个显示stl格式模型的组件
安装
没有规定什么版本 当前用的是0.139.2版本
npm i three
基本用法
全部代码
<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 | - | - |