webvisu v1.0.1

Webvisu

模型加载

1. 所需文件

• viewSdk.js

• webviz.js

• engine-asmjs.js

• engine-wasm.js

• engine.wasm

• server_integration.js

2. 初始化Api

 const config = { 
 "containerId": 'viewer',  //[必须]容器id
 "isShowThreeCoordinate": true, //是否展示三维坐标指示器
 "isShowNavcube": true   //是否展示三维立方体
 }
  let vieverSdk = new ViewerSDK(config)

3.加载模型

1.服务端加载

 vieverSdk.loaderModelFromServe(secretkey, modelName,rebackfun)

传入参数：

• secretkey：提供客户的加密key
• modelName：模型名称
• rebackfun：模型加载完回调函数 例子：

let hwv
 vieverSdk.loaderModelFromServe("QEKJH3J34Kl", "EBSceshi_1635909931602",rebackFun()).then(mainViewer =>
{
    hwv = mainViewer  
}
function rebackFun ()
{
  console.log("加载完成")
}

2.本地加载

 vieverSdk.loaderModel(url, rebackfun,isShowBg)

传入参数：

• url：模型地址

• rebackfun：模型加载完回调函数

• isShowBg：是否显示背景色

  例子：

  vieverSdk.loaderModel(modelName, (viewMain) =>{console.log("》》》》模型加载完成》》》》")}, false)}

模型接口

 let modeOpt = new ViewerSDK.ModelOpt(hwv)

视口重置

• modeOpt.reset()

选择

modeOpt.selectOpt(type:string)

参数说明：

• 单选 "clickSelect"

渲染模式

modeOpt.drawingMode(type: string)

参数说明：

• 渲染 "Shaded"
• 线框 "Wireframe"
• 隐藏线框 "HiddenLine"
• XRay "XRay"
• 带线框渲染 "wireframeshaded"

坐标轴

modeOpt.axisMark(isShow: boolean)

参数说明：

• 显示 true
• 隐藏 false

浏览立方体

modeOpt.cubeMark(isShow: boolean)

参数说明：

• 显示 true
• 隐藏 false

剖切

开启剖切

let cutting = vieverSdk.CuttingPlane;
cutting.cuttingStart(plan:string)

参数说明：

• X方向 "x"
• y方向 "y"
• z方向 "z"

关闭剖切

cutting.resetCuttingPlanes()

切面隐藏

cutting.toggleReferenceGeometry()

相机相关

let cameraOpt = new ViewerSDK.CameraOpt(hwv);

相机方向

cameraOpt.regulateCamera(direction: string) 参数说明

• 后面 "Back"
• 前面 "Front"
• 左面 "Left"
• 右面 "Right"
• 上面 "Top"
• 下面 "Bottom"

模型旋转模式

cameraOpt.modelRotateType(type: string) 参数说明

• 旋转 "orbit"
• 转台 "turntable"

相机模式

cameraOpt.changeCameraType(type: number) 参数说明

• 正交 0
• 透视 1

漫游

let roamOpt = new ViewerSDK.RoamOpt(hwv);

开启漫游 默认键盘

roamOpt.startRoam();

关闭漫游

roamOpt.stopRoam();

漫游方式

roamOpt.setWalkSettings(type:string) 参数说明

• 鼠标 "Mouse"
• 键盘 "Keyboard"

键盘操作说明

• 移动 w、a、s、d
• 上下 x、c
• 旋转 q、e
• 倾斜 R、F

设置漫游旋转速度(角度/秒) 默认40

roamOpt.setRotationDeg(num:number)

设置漫游速度(m/s)

roamOpt.setWalkSpeed(num:number)

设置高程速度(m/s)

roamOpt.setWalkSpeed(num:number)

设置视角范围(角度/秒) 默认90

roamOpt.setRViewDeg(num:number)

构件操作

` let componentOpt = new ViewerSDK.ComponentOpt(hwv);

`

聚焦

componentOpt.focuseNodes(ids: number [], duration?: number) 参数说明

• ids 构件的id
• duration 速度

高亮

componentOpt.setHighlighted(ids: number[], highlighted: boolean) 参数说明

• ids 构件的id
• highlighted true为高亮 false 为去除高亮

染色

componentOpt.setNodesFaceColor (ids: number[], color: String) 参数说明

• ids 构件的id
• color 颜色为rgb数值 例子： 19,6,23

隔离

componentOpt.quarantine (nodeId: number) 参数说明

• nodeId 构件的id

透明度

componentOpt.setTransparency(ids: number[], transparency: number) 参数说明

• ids 构件的id
• transparency 透明数值 0-1

隐藏

componentOpt.setNodesVisibility(ids: number[], visibility: boolean)

• ids 构件的id
• visibility true为显示 false 为去除隐藏

重置所有模型的透明度

componentOpt.resetTransparency()

获取节点的父节点

componentOpt.getNodeParent(nodeId:number) 参数说明

• nodeId 构件的id

获取节点的子节点

componentOpt.getNodeChildren(nodeId:number) 参数说明

• nodeId 构件的id

获取当前节点的变换矩阵

componentOpt.getNodeMatrix(nodeId:number) 参数说明

• nodeId 构件的id

获取节点的包围盒

componentOpt.getNodeRealBounding(nodeId:number) 参数说明

• nodeId 构件的id

获取多个节点的包围盒

componentOpt.getNodesBounding(nodeIdnodeIds:number[]) 参数说明

• nodeId 构件的id

重置所有构件的颜色

componentOpt.resetNodesColor()

重置所有构件的显示/隐藏状态

componentOpt.resetNodesVisibilityStatus()

重置所有构件的变换矩阵

componentOpt.resetNodesTransform()

获取节点名称

componentOpt.getNodeName(nodeId:number) 参数说明

• nodeId 构件的id

获取构件属性

componentOpt.getNodeProperties(nodeId:number):Promise 参数说明

• nodeId 构件的id