❤
npm
Sign UpSign In

canwinbim-viewer3d

1.0.79 • Public • Published

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);



});
    </script>

  • 包发布到公网 npm
    npm publish

Dependents (0)

Package Sidebar

Install

npm i canwinbim-viewer3d

Repository

gitlab.bingosoft.net/canwinbim/geofront/viewer3d.git

Weekly Downloads

0

Version

1.0.79

License

ISC

Unpacked Size

4.13 MB

Total Files

6

Last publish

Collaborators

  • canwinbim
Try on RunKit
Report malware