使用文档

1.x.x版本供vue2环境使用 3.x.x版本供vue3环境使用

安装

npm i [email protected]

// 复制 node_modules/cdata-viewer下的CDATA-Viewer文件夹到项目静态目录 或服务器
// 在项目入口index.html文件中  引入CDATA-Viewer/viewer3D.js   CDATA-Viewer/style.css

// 在main.js中引入
import CDATA from 'cdata-viewer';
Vue.use(CDATA);

1 CDataBims

props

| 名称 | 类型 | 备注 | 默认值 | | ---------------------- | -------------- | ------------------------------------ | ------------------------------------------------------------ | | bimUrls | array | 模型的网络地址数组 | - | | loadSuccess | function | 模型加载成功回调函数 | - | | width | string | 容器宽度 | 100% | | height | string | 容器高度 | 100vh | | btns | array | 自定义按钮组 | [] | | cube | boolean | 是否显示立方体 | true | | toolbar【v1.1.11修改】 | object/boolean | 是否显示按钮组 | { home: false, rotate: false, background: false, properties: false, modelStructure: false, fitView: false, measurement: false, section: false, explode: false, bimWalk: false, fullscreen: false } | | background | array | 背景色，上至下渐变，[r,g,b,r2,g2,b2] | [255,255,255,255,255,255] |

methods

| 名称 | 说明 | 参数 | 备注 | | --------------------------------- | ------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | | fitView【v1.1.11新增】 | 全模型自适应视图 | | | | resetHome【v1.1.11新增】 | 视角初始化 | | | | navigationLock | 是否锁定 | boolean | | | createPanel | 创建面板 | {id: string,title:string,content:dom,options:object} | | | removePanel | 删除面板 | string | 面板dom的id | | setColor | 设置颜色 | number,color:new THREE.Vector4,model:object | 参数1为构件id，参数3为构件所属模型，单一模型可以不传 | | getViewer | 获取模型viewer | - | | | getAggregateSelection | 获取被选择的构件 | - | | | getModel | 获取模型对象 | string | 入参模型urn，返回模型对象 | | getModels | 获取全部模型 | - | | | getNodeData | 获取构件数据 | array，model:object | 参数1为模型modelSelect事件获取的nodeArray,参数2为模型对象 | | createLine | 创建线 | {color: THREE.Color,points: array,lineWidth: number,opacity:number} | points中每3个数代表一个xyz坐标点，如[1,1,1,2,2,2] | | deleteLine | 删除线 | object | createLine返回的对象 | | addTag【v1.1.27修改】 | 添加标签 | {id,img, imgStyle,text,model,line = true,mark,lineStyle,textStyle,offset,relateId} | id: 构件id；img: 图片地址; imgStyle: 图片样式；text:说明文字；textStyle: 文字样式；model: 构件所属模型；line: 是否有引线；lineStyle: 引线样式，只支持第一段长度&第二段长度&颜色(length1，length2， color)；mark: 点击标签时回调函数的自定义参数；relateId：必传且不能重复 用作同构件标签识别 点击事件会返回该值 | | addFreeTag【v1.1.19修改】 | 添加自定义标签(不与构件关连) | {id,position,img,imgStyle,text,textStyle,mark,offset,relateId} | 参考addTag参数 id不再关联构件id,用于删除 | | removeFreeTag【v1.1.11新增】 | 删除自定义标签 | id （addFreeTag时传入的id） | | | moveFreeTag【v1.1.11新增】 | 移动自定义标签 | id, position | position(坐标，如{x: 0,y:0,z:0})} | | moveLabel | 移动标签 | - | 移动addTag生成的dom，通常不需要使用 | | removeTag【v1.1.27修改】 | 删除标签 | number，model:object， relateId | 参数1为构件id,参数2为model对象,参数3为创建标签时传递的relateId | | createSprites【v1.1.5修改】 | 新增精灵 | [{dbId:number,img:string,size:number,position: object}] | 会清空现有精灵，所以请一次性创建，不要循环调用;dbId:后续操作精灵使用，请勿重复，img：精灵图片网络地址或base64，size：精灵大小，position：精灵坐标，如{x: 0,y:0,z:0} **** 入参修改为数组类型 | | updateSprites | 修改精灵坐标 | array | [{dbId(创建时的dbId)，img，scale(缩放，0-2),position(坐标，如{x: 0,y:0,z:0})}] | | removeAllSprite | 删除全部精灵 | - | | | autoRotate | 模型自动旋转 | number | 参数为模型旋转速度，默认值 5 | | stopRotate | 模型停止旋转 | - | | | rotate | 模型旋转 | number,number | 参数1 x轴旋转值，参数1 y轴旋转值 | | getState | 获取模型状态 | - | | | setState | 设置模型状态 | object | 参数通过getState获取 | | getCamera | 获取相机 | - | | | applyCamera | 应用相机 | object | 参数通过getCamera获取 | | fitToView | 构件适应视图 | array | 构件id数组 | | startDraw | 开启涂鸦模式 | string | 默认freehand | | resize | 重置画布大小 | - | 模型容器被其他dom挤压大小变化后，如果产生bug，可以尝试调用 | | coordinateTranslate【v1.1.5新增】 | 3d坐标转换屏幕2d坐标 | object | 例：{x: 0,y:0,z:0} | | resetButton【v1.1.5新增】 | 修改按钮(只支持修改自定义按钮) | object | {id: number，visible：boolean,tip: string,className: string} 按钮创建的id，是否可见，按钮鼠标悬停提示文字，图标class | | clearColor【v1.1.5新增】 | 清除构件颜色 | - | | | clearSelection【v1.1.5新增】 | 清除模型构件选中 | - | | | setGhosting【v1.1.5新增】 | 构件线框 | boolean | | | setGroundShadow【v1.1.5新增】 | 地面阴影 | boolean | | | isolate【v1.1.5新增】 | 构件隔离 | array | 构件id数组 | | disableSelection【v1.1.14修改】 | 禁用选中 | boolean，model | model非必填 不填时全部模型禁用选中 | | hideModelNode【v1.1.10新增】 | 隐藏模型(保留构件树) | object,boolean | 参数1 模型对象；参数2 是否显示构件虚线(默认不显示)； | | showModelNode【v1.1.10新增】 | 显示模型 | object | 参数为模型对象 | | showAll【v1.1.10新增】 | 显示全部模型 | | | | disableMouseWheel【v1.1.14新增】 | 禁用鼠标滚轮 | boolean | | | fixedAngle【v1.1.14新增】 | 限制视角 | number,number | 参数分别为观测轴与水平面的夹角的 最小角度/最大角度 ** 限制1-90 且最大角度需大于最小角度20以上**存在快速移动鼠标会跳过限制的bug 后续版本会处理 | | freeAngle【v1.1.14新增】 | 解除限制视角 | | | | disableHighlight【v1.1.14新增】 | 禁用鼠标经过高亮 | boolean | | | selectionSetsPivot【v1.1.14新增】 | 点击构件后是否移动观察中心点 | boolean | 默认true |

event

| 事件名称 | 说明 | 参数类型 | 备注 | | ------------------------- | -------------------------- | -------- | ------------------------------------------ | | modelSelect | 构件选择事件 | object | | | tagClick | 标签点击事件 | object | {dbId: number,model:object}构件id,模型对象 | | leaveDraw | 离开涂鸦(涂鸦模式点击完成) | string | base64 | | modelFit | 自适应后触发事件 | object | | | spriteClick【v1.1.5新增】 | 精灵点击事件 | object | | | dbHover【v1.1.14新增】 | 鼠标经过构件的事件 | object | |

2 CDataScene

props

| 名称 | 类型 | 备注 | | --------- | ------ | ------------------------------ | | sceneData | Object | 初始化数据, 根据模型编辑器导出 |

methods

使用组件内.bims对象调用 CDataBims内方法

event

参考 CDataBims