You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Three.js技术问询:如何将轨迹线条固定到地形网格顶部

解决方案:让轨迹贴合Three.js地形顶部

嘿,我之前做Three.js地形可视化的时候也碰到过这个问题,刚好能给你几个靠谱的解决方案,帮你把轨迹牢牢贴在地形顶部:

方法1:直接采样地形顶点的高程值

既然你的地形是基于PlaneGeometry修改顶点z值生成的,那最直接的方式就是从地形几何体的顶点数据里读取对应位置的高程。这种方法效率高,适合静态地形的场景。

实现步骤:

  1. 先记录好PlaneGeometry的尺寸和分段数(创建时的widthheightwidthSegmentsheightSegments参数)。
  2. 把轨迹点的x、y坐标归一化到地形的局部坐标系范围(通常Plane的中心在原点,所以x范围是[-width/2, width/2],y同理)。
  3. 根据归一化后的坐标计算对应的顶点索引,直接读取该顶点的z值。

代码示例:

// 假设你的地形是这样创建的
const planeWidth = 100;
const planeHeight = 100;
const widthSegments = 64;
const heightSegments = 64;
const planeGeo = new THREE.PlaneGeometry(planeWidth, planeHeight, widthSegments, heightSegments);
// 这里省略修改顶点z值为高程的代码
const terrainMesh = new THREE.Mesh(planeGeo, yourMaterial);
scene.add(terrainMesh);

// 获取指定x,y位置的地形高程
function getTerrainZ(x, y) {
  // 将x,y转换为0-1的归一化坐标
  const normX = (x + planeWidth/2) / planeWidth;
  const normY = (y + planeHeight/2) / planeHeight;
  
  // 计算对应的顶点索引
  const xIndex = Math.min(Math.floor(normX * widthSegments), widthSegments);
  const yIndex = Math.min(Math.floor(normY * heightSegments), heightSegments);
  const vertexIndex = yIndex * (widthSegments + 1) + xIndex;
  
  // 返回该顶点的z值
  return planeGeo.attributes.position.getZ(vertexIndex);
}

// 处理你的轨迹点
const pathPoints = [
  new THREE.Vector3(-40, -40, 0),
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(40, 40, 0)
];

pathPoints.forEach(point => {
  point.z = getTerrainZ(point.x, point.y);
});

// 创建轨迹线条
const pathGeo = new THREE.BufferGeometry().setFromPoints(pathPoints);
const pathMaterial = new THREE.LineBasicMaterial({ color: 0xff0000, lineWidth: 2 });
const pathLine = new THREE.Line(pathGeo, pathMaterial);
scene.add(pathLine);

方法2:使用Raycaster射线检测

如果你的地形后续可能修改(比如动态调整高程、添加碰撞体),或者轨迹点不在地形顶点正上方,用射线检测会更灵活。它能精准获取地形表面任意点的z值,不受顶点分布限制。

实现步骤:

  1. 创建Raycaster实例,从轨迹点的x、y位置上方(比如z=100的位置)发射一条向下的射线。
  2. 让射线与地形网格相交,获取交点的z值就是地形表面的高程。

代码示例:

const raycaster = new THREE.Raycaster();

// 通过射线检测获取地形高程
function getTerrainZByRay(x, y) {
  // 设置射线起点(x,y, 足够高的位置)和方向(向下)
  raycaster.set(new THREE.Vector3(x, y, 100), new THREE.Vector3(0, 0, -1));
  
  // 检测与地形网格的交点
  const intersects = raycaster.intersectObject(terrainMesh);
  
  // 返回第一个交点的z值,没有交点则返回0
  return intersects.length > 0 ? intersects[0].point.z : 0;
}

// 处理轨迹点
pathPoints.forEach(point => {
  point.z = getTerrainZByRay(point.x, point.y);
});

方法3:预计算高程数据数组

如果你的轨迹点数量很多,或者需要频繁获取高程值,预计算一个二维高程数组会是性能最优的选择。你可以在生成地形时就把所有顶点的高程存起来,后续直接查表(还能做插值让轨迹更平滑)。

实现步骤:

  1. 生成地形时,把每个顶点的z值存入二维数组。
  2. 当需要获取轨迹点高程时,通过坐标计算数组索引,还可以用双线性插值让z值更平滑(避免轨迹在顶点间跳变)。

代码示例:

// 预计算高程数组
const heightData = [];
for (let y = 0; y <= heightSegments; y++) {
  heightData[y] = [];
  for (let x = 0; x <= widthSegments; x++) {
    const vertexIndex = y * (widthSegments + 1) + x;
    heightData[y][x] = planeGeo.attributes.position.getZ(vertexIndex);
  }
}

// 带双线性插值的高程获取函数
function getTerrainZWithInterpolation(x, y) {
  const normX = (x + planeWidth/2) / planeWidth;
  const normY = (y + planeHeight/2) / planeHeight;
  
  // 计算浮点索引(用于插值)
  const xFloat = normX * widthSegments;
  const yFloat = normY * heightSegments;
  
  // 获取周围四个顶点的索引
  const x0 = Math.floor(xFloat);
  const x1 = Math.min(x0 + 1, widthSegments);
  const y0 = Math.floor(yFloat);
  const y1 = Math.min(y0 + 1, heightSegments);
  
  // 获取四个顶点的高程
  const z00 = heightData[y0][x0];
  const z01 = heightData[y0][x1];
  const z10 = heightData[y1][x0];
  const z11 = heightData[y1][x1];
  
  // 双线性插值计算平滑的z值
  const tx = xFloat - x0;
  const ty = yFloat - y0;
  
  const z0 = z00 * (1 - tx) + z01 * tx;
  const z1 = z10 * (1 - tx) + z11 * tx;
  
  return z0 * (1 - ty) + z1 * ty;
}

注意事项

  • 如果地形有缩放、旋转或者平移,记得先把轨迹点的坐标转换到地形的局部坐标系,再进行高程计算。
  • 射线检测虽然灵活,但如果轨迹点数量极大(比如上千个),可能会有性能损耗,这时候优先选择预计算数组或顶点采样。
  • 如果需要轨迹随地形动态更新(比如实时修改地形高程),要同步更新高程数据或重新执行射线检测。

内容的提问来源于stack exchange,提问作者user163757

火山引擎 最新活动