实例说明

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

操作方式

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

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

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

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

  • 定位到构件:双击构件

  • 页面全屏: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
        }
    }