iClient3D for WebGL ViewCube控件
作者：Emil
目录
一、前言
二、软件版本
三、效果展示
3.1 场景视角变化，同步给ViewCube
3.2 推拽ViewCube ，同步修改场景视角
3.3 点击ViewCube，调整场景固定视角
五、完整示例
一、前言
在三维数字孪生场景中，用户常因场景复杂、视角多变而难以快速定位与高效导航。为应对这一挑战，iClient3D for WebGL ViewCube控件 深度融合BIM领域成熟的ViewCube导航交互逻辑，为全域空间数据可视化提供一体化方向定位与场景操控解决方案。该控件帮助用户以直觉化的方式驾驭三维空间，大幅提升操作效率，是数字孪生及BIM+GIS融合应用中的关键交互支撑。
二、软件版本
supermap-iclient3d-for-webgl_webgpu-12.0.1-251225-49063.zip
链接: https://pan.baidu.com/s/1Evl9Kmm5YnxiL9uBhDVTrQ?pwd=syd9
ViewCube1.0.zip
链接: https://pan.baidu.com/s/1GEGgjPcYZ8e3HY6Z7Go9QA?pwd=kpi8 提取码: kpi8
下载后解压，使用vs code 打开文件夹，选中Model_Viewcube.html文件右键“Open in Live Server”
三、效果展示
3.1 场景视角变化，同步给ViewCube
在场景中调整视角，viewcube 会根据场景相机得方位角，俯仰角，同步修改Viewcube的显示
3.2 推拽ViewCube ，同步修改场景视角
在ViewCube中按住鼠标左键移动，会看到ViewCube在旋转，同时旋转时ViewCube的方位角和俯仰角会同步给场景进行视角调整。
注意事项：
场景调整方位角和俯仰角时，是以屏幕中心拾取到场景中的坐标点为中心。若拾取不到时（例如屏幕中心点为天空）已视角前方100米作为旋转中心点。
3.3 点击ViewCube，调整场景固定视角
在ViewCube中，鼠标移动到立方体上会有对应的高亮块，点击后高亮块后，会调整ViewCube到对应的方位。同时方位值会同步给场景。
注意事项：
若为ViewCube 字段 home 和 distance 赋值，这Viewcube 点击高亮块时，场景视角调整到以home为中心，distance为距离。
若未对ViewCube 字段 home 和 distance 赋值，则与3.2中拖拽ViewCube时中心点计算逻辑一致。
五、完整示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>模型视图</title> <link href="./SuperMap3D/Widgets/widgets.css" rel="stylesheet"> <script src="./SuperMap3D/SuperMap3D.js"></script> <script type="text/javascript" src="./viewcube/viewcube.js"></script> </head> <body> <div id="Container"></div> <div class="loading-container"> <div class="circle"></div> </div> <script type="module"> /** * 页面加载完成后的初始化函数 * @param {Object} SuperMap3D - SuperMap3D库对象 */ function onload(SuperMap3D) { // 创建三维场景视图器，配置模型视图功能相关参数 const viewer = new SuperMap3D.Viewer('Container', { contextOptions: { contextType: Number(2), // Webgl2:2 ; WebGPU:3 - 设置渲染引擎类型 msaaLevel: 2, // 多重采样抗锯齿级别 }, timeline: true, // 启用时间轴控件 useSuperMapOIT: true, // 启用SuperMap顺序无关透明度 navigation: false }); // 等待场景初始化完成后执行初始化函数 viewer.scenePromise.then(function (scene) { init(SuperMap3D, scene, viewer); }); } /** * 场景初始化函数，设置模型视图功能 * @param {Object} SuperMap3D - SuperMap3D库对象 * @param {Object} scene - 三维场景对象 * @param {Object} viewer - 视图器对象 */ function init(SuperMap3D, scene, viewer) { // 设置分辨率缩放比例，提高渲染质量 viewer.resolutionScale = window.devicePixelRatio; // 打开动画场景，禁用自动设置视图 const promise = scene.open("http://www.supermapol.com/realspace/services/3D-BIM-new/rest/realspace", undefined, { autoSetView: false }); SuperMap3D.when(promise, function (layers) { document.querySelector('.loading-container').style.display = 'none'; initViewcube(scene, viewer); }) } function initViewcube(scene, viewer) { // 配置场景显示设置 scene.sun.show = true; // 显示太阳 scene.globe.show = false; // 隐藏地球 scene.globe.baseColor = SuperMap3D.Color.BLACK; // 没有影像图层时地球的底色设为黑色 scene.skyAtmosphere.show = false; // 隐藏大气效果 // 获取第一个图层和相关参数 const layer = viewer.scene.layers.layerQueue[0]; // 计算图层包围球，用于确定相机距离 const boundingSphere = layer.boundingSphere || SuperMap3D.BoundingSphere.fromRectangle3D(layer.layerBounds); const distanceScale = 3; // 距离缩放因子 const distance = boundingSphere.radius * distanceScale; // 相机到模型的距离 const matModel = layer._matModel; // 模型变换矩阵 let hprange = new SuperMap3D.HeadingPitchRange(0, -0.1, distance); // 设置相机位置和朝向 viewer.camera.lookAtTransform(matModel, hprange); // 取消相机锁定，恢复自由控制 viewer.camera.lookAtTransform(SuperMap3D.Matrix4.IDENTITY); var viewcube = new ViewCube(viewer, { language: "zh", width: 300, height: 300, home: matModel, distance: distance, }); } // 检查SuperMap3D库是否已加载，如果已加载则启动应用 if (typeof SuperMap3D !== 'undefined') { window.startupCalled = true; onload(SuperMap3D); } </script> </body> </html>