如何在Three.js球体上为国家区域正确填充颜色？

问题核心 #

填充区域被球体网格遮挡，本质是深度缓存冲突或几何体坐标未正确映射到球体表面导致的层级渲染问题。

具体解决方法 #

• 关闭填充面的深度测试
  给填充材质添加depthTest: false，让填充面跳过深度检测直接显示在球体上方，同时开启双面渲染避免漏面：

  const fillMaterial = new THREE.MeshBasicMaterial({
    color: 0xff0000,
    depthTest: false,
    side: THREE.DoubleSide
  });
  

• 确保填充坐标是球体3D坐标
  用earcut三角化前，必须把经纬度转成贴合球体的3D坐标，不能直接用平面坐标：

  // 经纬度转球体坐标工具函数
  function latLonToSphere(lat, lon, radius) {
    const phi = (90 - lat) * Math.PI / 180;
    const theta = (lon + 180) * Math.PI / 180;
    return new THREE.Vector3(
      -radius * Math.sin(phi) * Math.cos(theta),
      radius * Math.cos(phi),
      radius * Math.sin(phi) * Math.sin(theta)
    );
  }
  
  // 转换国家坐标并生成几何体
  const countryCoords = [...]; // 你的国家经纬度数组
  const radius = 100; // 球体半径
  const flattenedPositions = countryCoords
    .map(coord => latLonToSphere(coord.lat, coord.lon, radius))
    .flatMap(v => [v.x, v.y, v.z]);
  
  const indices = earcut(flattenedPositions);
  const fillGeometry = new THREE.BufferGeometry();
  fillGeometry.setAttribute('position', new THREE.Float32BufferAttribute(flattenedPositions, 3));
  fillGeometry.setIndex(indices);
  fillGeometry.computeVertexNormals(); // 生成正确法线
  

• 调整渲染顺序（可选）
  如果不想关闭深度测试，可通过渲染顺序让填充面后渲染，同时关闭填充面的深度写入避免干扰：

  // 球体网格先渲染
  globeMesh.renderOrder = 0;
  // 填充面后渲染，显示在上方
  fillMesh.renderOrder = 1;
  fillMaterial.depthWrite = false;
  

原代码参考 #

边框实现代码示例

// 替换为你的边框实现代码
const sphereGeometry = new THREE.SphereGeometry(100, 64, 32);
const borderGeometry = new THREE.EdgesGeometry(sphereGeometry);
const borderMaterial = new THREE.LineBasicMaterial({ color: 0x000000 });
const borderMesh = new THREE.LineSegments(borderGeometry, borderMaterial);
scene.add(borderMesh);

优化后的半解决方案填充代码

import earcut from 'earcut';

// 经纬度转球体坐标函数
function latLonToSphere(lat, lon, radius) {
  const phi = (90 - lat) * Math.PI / 180;
  const theta = (lon + 180) * Math.PI / 180;
  return new THREE.Vector3(
    -radius * Math.sin(phi) * Math.cos(theta),
    radius * Math.cos(phi),
    radius * Math.sin(phi) * Math.sin(theta)
  );
}

// 生成国家填充网格
const countryCoords = [...]; // 你的国家边界经纬度数据
const radius = 100;
const flattenedPositions = countryCoords
  .map(coord => latLonToSphere(coord.lat, coord.lon, radius))
  .flatMap(v => [v.x, v.y, v.z]);

const indices = earcut(flattenedPositions);
const fillGeometry = new THREE.BufferGeometry();
fillGeometry.setAttribute('position', new THREE.Float32BufferAttribute(flattenedPositions, 3));
fillGeometry.setIndex(indices);
fillGeometry.computeVertexNormals();

const fillMaterial = new THREE.MeshBasicMaterial({
  color: 0x00ff00,
  depthTest: false,
  side: THREE.DoubleSide
});
const fillMesh = new THREE.Mesh(fillGeometry, fillMaterial);
scene.add(fillMesh);

内容的提问来源于stack exchange，提问作者i.surin