canwinbim-viewer3d

$3

擎云 BIM 可视化 webgl 三维引擎

$3

- npm 安装 import 导入

1. npm 安装

``npm
npm install --save canwinbim-viewer3d
`

2. import 导入

`javascript
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

`javascript

`

2. 初始化

`javascript
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’ 标签内模块化引用


    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`