使用truf.js渲染出两个面重合的部分（挖洞）

Three.js 实现面重合部分的挖洞效果

最新推荐文章于 2025-08-20 15:23:14 发布

原创最新推荐文章于 2025-08-20 15:23:14 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

本文介绍了如何使用Three.js库在前端开发中渲染两个面重叠区域，通过定义加载面的函数和计算重合部分，最终实现类似挖洞的视觉效果。文章提供了详细步骤及效果图。

部署运行你感兴趣的模型镜像

1.定义一哥加载面的函数：

	//加载面数据
			function polygonRender(id, geojson, color, opacity) {
				map.addSource(id + '_maine', geojson);
				map.addLayer({
					'id': id,
					'type': 'fill',
					'source': id + '_maine',
					'layout': {},
					'paint': {
						'fill-color': color,
						'fill-opacity': opacity
					}
				});
				map.addLayer({
					'id': id + '_outline',
					'type': 'line',
					'source': id + '_maine',
					'layout': {},
					'paint': {
						'line-color': '#5500ff',
						'line-width': 2
					}
				});
			}

2.拿到两个面的数据，如下：

var poly1 = turf.polygon([
					[
						[-74.59750366210933, 40.24100740474415],
						[-74.30448358322855, 40.25882589192875],
						[-74.37864129807222, 40.01209703137826],
						[-74.59012811447857, 40.036284501614546],
						[-74.59750366210933, 40.24100740474415]
					]
				]);
				var poly2 = turf.polygon([
					[
						[-74.52009027244021, 40.19067137177086],
						[-74.40310561419257, 40.19486747791623],
						[-74.4456776356767, 40.118247713516155],
						[-74.52009027244021, 40.19067137177086]
					]
				]);

3.计算两个面重合的地方：

//去重部分，镂空状态
				var difference = turf.difference(poly1, poly2); //交集
				var polygonjson4 = {
					'type': 'geojson',
					'data': difference

				};
				polygonRender("polygon_id_4", polygonjson4, "orange", 1);

效果图如下：