如何在Threebox中锚定裁剪平面？解决视图平移偏移问题

问题描述 #

我们正尝试在Threebox中实现剖面工具，但发现无法通过tb.Object3D()或tb.add()将THREE.Plane()裁剪平面添加到tb中——因为THREE.Plane是数学平面而非3D几何体。这导致裁剪平面无法随视图同步平移，当地图平移时，裁剪平面会错误地裁剪其他对象。请问在Threebox中是否有办法让裁剪平面保持固定？

相关代码片段 #

var plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -50);
var material = new THREE.MeshNormalMaterial({
  clippingPlanes: [plane],
  side: THREE.FrontSide,
  clipShadows: true,
});

var sphere = window.tb
  .sphere({ radius: 5, material: material })
  .setCoords(basePoint);

window.tb.add(sphere);

tb.renderer.localClippingEnabled = true;

效果对比 #

平移前的裁剪球体效果：

平移后的裁剪球体效果：

解决方案 #

核心思路 #

THREE.Plane基于Three.js世界坐标系，而Threebox会随地图平移动态调整场景坐标偏移。要让裁剪平面相对地图固定，需在地图平移时同步更新裁剪平面的坐标参数，使其对齐到目标地图位置的Threebox世界坐标。

修改代码实现 #

// 初始化裁剪平面与球体
var plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), -50);
var material = new THREE.MeshNormalMaterial({
  clippingPlanes: [plane],
  side: THREE.FrontSide,
  clipShadows: true,
});

var sphere = window.tb
  .sphere({ radius: 5, material: material })
  .setCoords(basePoint);

window.tb.add(sphere);
tb.renderer.localClippingEnabled = true;

// 监听地图平移事件，实时更新裁剪平面
map.on('move', function() {
  // 将目标地图坐标转换为Threebox世界坐标
  var fixedWorldPos = tb.utils.lnglatToWorld(basePoint);
  // 调整裁剪平面常数，使其保持在目标位置的指定高度
  plane.constant = - (fixedWorldPos.y - 50);
});

关键说明 #

• 使用tb.utils.lnglatToWorld将固定的地图经纬度转换为Threebox世界坐标，确保裁剪平面锚定在目标地图位置。
• 每次地图平移时更新裁剪平面的constant值，让平面跟随地图坐标偏移同步移动，从而保持相对地图的固定位置。

内容的提问来源于stack exchange，提问作者Romain Bigare