实例说明
- 实例如若不用,请及时释放资源
- 实例打开后如若不操作,默认三十分钟后关闭
操作方式
-
旋转:鼠标右键 | 单指移动
-
缩放:滚轮 | 双指反向移动
-
平移:鼠标滚轮按下移动 | 双指同向移动
-
点选:鼠标左键点击 | 单指点击
-
定位到构件:双击构件
-
页面全屏:F11
-
取消页面全屏:F11
特殊说明:
- 如果没有鼠标,如何实现滚轮的效果?
- 双指一块向上滑动,或者双指一块向下滑动。
- 如果没有鼠标,如何实现滚轮的效果?
使用文档
- 安装
- npm install cbim-render-sdk --save
- 更新
- npm update cbim-render-sdk
- 引用方式
- import RenderViewer from 'cbim-render-sdk'
- 使用
- 有三种使用方式,根据项目情况选择最合适的即可
- 根据我方提供的密钥和代理方式,直接使用我方接口的情况:
new RenderViewer('容器ID', {api: '/raas'}, (responseData) => { console.warn('返回数据:', responseData) }) renderViewer.getWsInfo({itemVersionId: '模型版本号'})
- 根据我方提供的密钥和代理方式又封装一层,可使用如下方式:
new RenderViewer('容器ID', {api: '/raas'}, (responseData) => { console.warn('返回数据:', responseData) }) renderViewer.getWsInfo({itemVersionId: '模型版本号', requestUrlPrefix: '请求地址前缀'})
- 直接提供 webSocket 链接,可使用如下方式:
new RenderViewer('容器ID', {api: '/raas'}, (responseData) => { console.warn('返回数据:', responseData) }) renderViewer.getWsInfo({webSocketUrl: 'webSocket连接地址'})
- 根据我方提供的密钥和代理方式,直接使用我方接口的情况:
- script标签引用方式与使用方式,只有 new 的时候不一样,其它接口使用都一样
<script src="https://cdn.jsdelivr.net/npm/cbim-render-sdk@latest/index.js" type="text/javascript" charset="utf-8"></script> let renderViewer = new VIEWER('容器ID', {api: '/raas'}, (responseData) => { console.warn('返回数据:', responseData) })
- 有三种使用方式,根据项目情况选择最合适的即可
- 通用接口
- 点击右侧api即可查看通用接口,以及对接方式
- 通用接口没有的可以使用如下方式进行调用
- renderViewer.ws.sendData(requestData)
- 注:requestData的数据格式如下,只传入图形端需要的几个参数即可
let requestData = { uuid: '', type: '', extraType: 0, dx: -1, dy: -1, posx: -1, posy: -1, anx: -1, asx: -1, any: -1, asy: -1, anz: -1, asz: -1 } renderViewer.ws.sendData(requestData)
- 返回数据
- 注:responseData 的数据格式如下,如若有"from":"web",则可以咨询前端开发,其他返回的数据内容找对应的图形端开发对接
- eg: 前端返回数据: {"from":"web","type":"connectClose","data":"连接中断,请重试..."}
- eg: 图形端返回数据:{"type":"LoadStatus","data":100}
- 判断是否是前端返回数据的关键参数为:"from":"web"
let responseData = {"type":"LoadStatus","data":100} if (responseData.from == "web") { // 前端返回数据 switch (responseData.type) { case 'connectClose': // 实例断开连接 break default: break } } else { // 图形端返回数据 switch (responseData.type) { case 'LoadStatus': // 模型加载进度 break default: break } }