canwin-viewer3d

擎云 BIM 可视化 webgl 三维引擎

使用方法

• npm 安装 import 导入

1. npm 安装

   npm install --save canwinbim-viewer3d

2. import 导入

   import Canwin from 'canwinbim-viewer3d'

3. viewer 初始化

    let viewerApp = null;
       //配置参数
       let options = {
           webApi:"120.197.17.151:40007",//webpath
           webLocal:"120.197.17.151:40007",//socket
           noLoadDocList:true,
           clientId:
               "366c6088-34e1-4738-b517-649d5575ff58",
           clientSecret:
               "c2c434b5-60d0-44dd-ab33-6352b5c0998f"
       };
      
       //1.通过全局Initializer()初始化(不推荐直接创建Viewer3D)
       Canwin.Viewing.Globals.Graphics3DConfig.setGraphicsLib(Canwin.Viewing.Globals.Graphics3DConfig.LIB_XEOKIT_FRAME_JS);
       Canwin.Viewing.Initializer(options, function onInitialized() {
           //2.通过viewerApp(viewerApp包装了viewer3D)创建一个app
           viewerApp = new Canwin.Viewing.ViewingApplication("rendererElement");
           //3.注册一个viewer3D
           viewerApp.registerViewer(viewerApp.k3d, Canwin.Viewing.Private.BaseViewer3D);
           Canwin.Viewing.theExtensionManager.registerExtension(Canwin.Viewing.ExtensionManager.S_NAVIGATION_VIEW_TOOL_EXTENSION, Canwin.Viewing.Globals.NavigationViewToolExtension);
           viewerApp.getCurrentViewer().loadExtension(Canwin.Viewing.ExtensionManager.S_NAVIGATION_VIEW_TOOL_EXTENSION);
           Canwin.Viewing.theExtensionManager.registerExtension(Canwin.Viewing.ExtensionManager.S_LABEL_MARKER_EXTENSION, Canwin.Viewing.Globals.LabelMarkerExtension);
           viewerApp.getCurrentViewer().loadExtension(Canwin.Viewing.ExtensionManager.S_LABEL_MARKER_EXTENSION);
           let baseExtension = Canwin.Viewing.theExtensionManager.getExtensionAtId(Canwin.Viewing.ExtensionManager.S_BASE_CONTROL_EXTENSION);
           baseExtension.setRotateViewAndScene(1, 0);
           baseExtension.enableMoving(false);
            
       });

• script 标签引入

1. html 标签引入本地，远程，cdn viewer3d

   <script src="xxxxx/viewer3D.umd.js"></script>

2. 初始化

    let viewerApp = null;
       //配置参数
       let options = {
           webApi:"120.197.17.151:40007",//webpath
           webLocal:"120.197.17.151:40007",//socket
           noLoadDocList:true,
           clientId:
               "366c6088-34e1-4738-b517-649d5575ff58",
           clientSecret:
               "c2c434b5-60d0-44dd-ab33-6352b5c0998f"
       };
      
       //1.通过全局Initializer()初始化(不推荐直接创建Viewer3D)
       Canwin.Viewing.Globals.Graphics3DConfig.setGraphicsLib(Canwin.Viewing.Globals.Graphics3DConfig.LIB_XEOKIT_FRAME_JS);
       Canwin.Viewing.Initializer(options, function onInitialized() {
           //2.通过viewerApp(viewerApp包装了viewer3D)创建一个app
           viewerApp = new Canwin.Viewing.ViewingApplication("rendererElement");
           //3.注册一个viewer3D
           viewerApp.registerViewer(viewerApp.k3d, Canwin.Viewing.Private.BaseViewer3D);
           Canwin.Viewing.theExtensionManager.registerExtension(Canwin.Viewing.ExtensionManager.S_NAVIGATION_VIEW_TOOL_EXTENSION, Canwin.Viewing.Globals.NavigationViewToolExtension);
           viewerApp.getCurrentViewer().loadExtension(Canwin.Viewing.ExtensionManager.S_NAVIGATION_VIEW_TOOL_EXTENSION);
           Canwin.Viewing.theExtensionManager.registerExtension(Canwin.Viewing.ExtensionManager.S_LABEL_MARKER_EXTENSION, Canwin.Viewing.Globals.LabelMarkerExtension);
           viewerApp.getCurrentViewer().loadExtension(Canwin.Viewing.ExtensionManager.S_LABEL_MARKER_EXTENSION);
           let baseExtension = Canwin.Viewing.theExtensionManager.getExtensionAtId(Canwin.Viewing.ExtensionManager.S_BASE_CONTROL_EXTENSION);
           baseExtension.setRotateViewAndScene(1, 0);
           baseExtension.enableMoving(false);
            
       });

• script type=‘’module’ 标签内模块化引用

  <script type="module">     import Canwin from '../../dist/viewer3d-es.js'     console.log(Canwin)

  // 使用

  let viewerApp = null; //配置参数 let options = { webApi:"120.197.17.151:40007",//webpath webLocal:"120.197.17.151:40007",//socket // webStaticPath : "../../../src/util/task/", noLoadDocList:true, clientId: "366c6088-34e1-4738-b517-649d5575ff58", clientSecret: "c2c434b5-60d0-44dd-ab33-6352b5c0998f" };

  //1.通过全局Initializer()初始化(不推荐直接创建Viewer3D) Canwin.Viewing.Globals.Graphics3DConfig.setGraphicsLib(Canwin.Viewing.Globals.Graphics3DConfig.LIB_XEOKIT_FRAME_JS); Canwin.Viewing.Initializer(options, function onInitialized() { console.log("Initializer"); //2.通过viewerApp(viewerApp包装了viewer3D)创建一个app viewerApp = new Canwin.Viewing.ViewingApplication("rendererElement"); //3.注册一个viewer3D viewerApp.registerViewer(viewerApp.k3d, Canwin.Viewing.Private.BaseViewer3D); Canwin.Viewing.theExtensionManager.registerExtension(Canwin.Viewing.ExtensionManager.S_LABEL_MARKER_EXTENSION, Canwin.Viewing.Globals.LabelMarkerExtension); viewerApp.getCurrentViewer().loadExtension(Canwin.Viewing.ExtensionManager.S_LABEL_MARKER_EXTENSION); Canwin.Viewing.theExtensionManager.registerExtension(Canwin.Viewing.ExtensionManager.S_FLYCAMERA_EXTENSION, Canwin.Viewing.Globals.FlyCameraExtension); viewerApp.getCurrentViewer().loadExtension(Canwin.Viewing.ExtensionManager.S_FLYCAMERA_EXTENSION); let statsExtension = Canwin.Viewing.theExtensionManager.getExtensionAtId(Canwin.Viewing.ExtensionManager.S_STATS_EXTENSION); statsExtension.show(); console.log("开始加载》。。");

    viewerApp.getCurrentViewer().mViewerApp.loadXKT("down_605ea0f8-2dc8-416a-9e80-8545b1006fa8_1872539922594", "testId", model=>{
        let aabb = model._aabb;
        let center = {
            x: (model._aabb[3] + model._aabb[0]) / 2,
            y: (model._aabb[4] + model._aabb[1]) / 2,
            z: (model._aabb[5] + model._aabb[2]) / 2,
        };
        let distanceX = model._aabb[3] - model._aabb[0];
        let distanceY = model._aabb[4] - model._aabb[1];
        let distanceZ = model._aabb[5] - model._aabb[2];
        let maxDistance = Math.max(distanceX,distanceY,distanceZ);
        let centerUp = {x:center.x, y:center.y + maxDistance, z:center.z};
        let r3d = viewerApp.getCurrentViewer().mRenderer3D;
        let lookTo = (pos, dir, center)=>{
            let at = new Canwin.Viewing.Globals.Vector3D();
            dir.addReturn(pos, at);
            let cameraNode = new Canwin.Viewing.Globals.CameraNode("cameraNode", r3d);
            let baseControl = Canwin.Viewing.theExtensionManager.getExtensionAtId(Canwin.Viewing.ExtensionManager.S_BASE_CONTROL_EXTENSION);
            baseControl.enable(false);
            baseControl.setViewCenter(center);
            cameraNode.setLookAtUpPitchYaw(pos, at, {x:0, y:1, z:0});
            baseControl.refreshViewInfoDontTrigger();
            //下面这行不加的话,虽然是从顶部去观察,但是相机可能是旋转某个角度的顶视图
            baseControl.mBaseCamera.updateInPitchYawRoll(-90, -90, null);
            baseControl.enable(true);
        }
       
    });
  
    //设置系统拓展的参数
    let baseExtension = Canwin.Viewing.theExtensionManager.getExtensionAtId(Canwin.Viewing.ExtensionManager.S_BASE_CONTROL_EXTENSION);
    //设置左键旋转
    baseExtension.enableR
    baseExtension.setRotateViewAndScene(1, 0);
    //禁用漫游(如果开启漫游,建议设置左键移动镜头,setRotateViewAndScene(0, 1);
    baseExtension.enableMoving(true);
    let labelMarkerExtension = Canwin.Viewing.theExtensionManager.getExtensionAtId(Canwin.Viewing.ExtensionManager.S_LABEL_MARKER_EXTENSION);
    labelMarkerExtension.enable(false);
  
   
  
  });

• 包发布到公网 npm
  npm publish