实例说明

• 实例如若不用，请及时释放资源
• 实例打开后如若不操作，默认三十分钟后关闭

操作方式

• 旋转：鼠标右键 | 单指移动

• 缩放：滚轮 | 双指反向移动

• 平移：鼠标滚轮按下移动 | 双指同向移动

• 点选：鼠标左键点击 | 单指点击

• 定位到构件：双击构件

• 页面全屏：F11

• 取消页面全屏：F11

  特殊说明：

  • 如果没有鼠标，如何实现滚轮的效果？
    • 双指一块向上滑动，或者双指一块向下滑动。

使用文档

• 安装
  • npm install cbim-render-sdk --save
• 更新
  • npm update cbim-render-sdk
• 引用方式
  • import RenderViewer from 'cbim-render-sdk'
• 使用
  • 有三种使用方式，根据项目情况选择最合适的即可
    1. 根据我方提供的密钥和代理方式，直接使用我方接口的情况：

       new RenderViewer('容器ID', {api: '/raas'}, (responseData) => {
           console.warn('返回数据：', responseData)
       })
       renderViewer.getWsInfo({itemVersionId: '模型版本号'})
       

    2. 根据我方提供的密钥和代理方式又封装一层，可使用如下方式：

       new RenderViewer('容器ID', {api: '/raas'}, (responseData) => {
           console.warn('返回数据：', responseData)
       })
       renderViewer.getWsInfo({itemVersionId: '模型版本号', requestUrlPrefix: '请求地址前缀'})
       

    3. 直接提供 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
      }
  }