SuperMap iClient3D for WebGL 如何平面裁剪.glb模型

最新推荐文章于 2025-12-03 10:40:49 发布

转载最新推荐文章于 2025-12-03 10:40:49 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/EliseJ/article/details/149709214

文章标签：

#3d #webgl #平面

作者：姜尔

一、功能介绍

本文实现了一个基于SuperMap3D（类似Cesium的3D地理可视化引擎）的模型裁剪功能，主要特点包括：

3D模型加载与显示：加载一个飞机模型（Cesium_Air.glb）
动态裁剪平面：通过ClippingPlane实现模型裁剪，用户可通过滑动条调整裁剪平面的位置（wheight参数），实时切割模型。
交互控制：提供输入框（#lodScale）供用户输入数值，动态修改裁剪距离，实现模型切割效果的交互式调整。

二、主要代码接口

new SuperMap3D.ClippingPlane(normal, distance)

要将平面转换为适用于ClippingPlaneCollection的赫斯法线式（Hessian Normal Form）并与数学中的Plane函数兼容。

Name	Type	Description
`normal`	Cartesian3	平面单位法向量（指经过归一化处理后的平面法向量，其模长为1）。
`distance`	Number	从原点到平面的最短距离。其符号决定了原点位于平面的哪一侧， ‌距离为正‌时，原点位于法向量方向的半空间内；距离为负‌时，原点位于法向量反方向的半空间内；距离为零‌时，平面经过原点。

var clippingPlanes = [
								new SuperMap3D.ClippingPlane(
									new SuperMap3D.Cartesian3(0.0, 0.0, -1.0), // 平面法线（指向下方）
									wheight // 平面到原点的距离（设为0表示从模型中心裁剪）
								)
							]; //裁剪平面数组
							const modelEntityClippingPlanes = new SuperMap3D.ClippingPlaneCollection({
								planes: clippingPlanes,
								edgeWidth: 1
							});

三、全部前端代码

<!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>CBD</title>
		<link href="../../Build/SuperMap3D/Widgets/widgets.css" rel="stylesheet">
		<script src="./js/config.js"></script>
		<link href="./css/pretty.css" rel="stylesheet">
		<link href="./css/style.css" rel="stylesheet">
		<script src="./js/jquery.min.js"></script>
		<script type="text/javascript" src="../../Build/SuperMap3D/SuperMap3D.js"></script>
	</head>
	<body>
		<div id="Container"></div>
		<div id="tool-bar" class="param-container tool-bar">

			<div class="param-item">
				<label>距离</label>
				<input type="number" id="lodScale" min="-1000" max="1000" value="1" step="10" style="width: 140px">
			</div>
		</div>
		<script type="text/javascript">
			function onload(SuperMap3D) {
				// 通过config.js中的getEngineType,获取引擎类型（EngineType）用于设置启动方式
				var EngineType = getEngineType();
				var viewer = new SuperMap3D.Viewer('Container', {
					contextOptions: {
						contextType: Number(EngineType), // Webgl2:2 ; WebGPU:3
					}
				});
				viewer.scenePromise.then(function(scene) {
					init(SuperMap3D, scene, viewer);
				});
			}
			function init(SuperMap3D, scene, viewer) {
				var scene = viewer.scene;
				scene.shadowMap.darkness = 1.275; //设置第二重烘焙纹理的效果（明暗程度）
				scene.debugShowFramesPerSecond = false;
				scene.hdrEnabled = false;
				scene.sun.show = true;
				let wheight = 1
				var widget = viewer.Widget;
				try {
						//更新裁剪平面的位置
						function updateClippingPlanes() {
							console.log("更新了")
							var clippingPlanes = [
								new SuperMap3D.ClippingPlane(
									new SuperMap3D.Cartesian3(0.0, 0.0, -1.0), // 平面法线（指向下方）
									wheight // 平面到原点的距离（设为0表示从模型中心裁剪）
								)
							]; //裁剪平面数组
							const modelEntityClippingPlanes = new SuperMap3D.ClippingPlaneCollection({
								planes: clippingPlanes,
								edgeWidth: 1
							});
							return modelEntityClippingPlanes;
						}
						const modelentity = new SuperMap3D.Entity({
							id: "chuanboplay",
							name: "chuanboplay",
							//118.54808443307202, 24.803647984009018, 59.16445837528966
							position: new SuperMap3D.Cartesian3.fromDegrees(116.45553697698202,
								39.90657994600217, 21.542919457733646),
							label: {
								text: "某飞机",
								font: '14px sans-serif'
							},
							model: {
								uri: './Cesium_Air.glb',
								scale: 10,
								clippingPlanes: new SuperMap3D.CallbackProperty(updateClippingPlanes,
									false) //重要，设置裁剪平面的地方
							}
						})
					var mentity =	viewer.entities.add(modelentity);
                    viewer.zoomTo(mentity);
						$("#lodScale").on("input change", function() {
							var lod = $("#lodScale").val();
							wheight = Number(lod)
						});


				} catch (e) {
					if (widget._showRenderLoopErrors) {
						var title = '渲染时发生错误，已停止渲染。';
						widget.showErrorPanel(title, undefined, e);
					}
				}

			}
			if (typeof SuperMap3D !== 'undefined') {
				window.startupCalled = true;
				onload(SuperMap3D);
			}
		</script>
	</body>
</html>