求助：在应用中实现带标记点与虚实折线的地球球体视图功能

以下基于Three.js（Web端3D开发常用库）给出落地实现方案，步骤清晰可直接复用：

1. 搭建基础地球场景 #

先初始化3D核心组件，加载地球纹理并创建球体模型：

// 初始化场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建地球球体
const earthRadius = 5;
const geometry = new THREE.SphereGeometry(earthRadius, 64, 64);
const textureLoader = new THREE.TextureLoader();
const earthTexture = textureLoader.load('earth-texture.jpg'); // 替换为你的地球纹理路径
const material = new THREE.MeshPhongMaterial({ map: earthTexture });
const earth = new THREE.Mesh(geometry, material);
scene.add(earth);

// 添加光照提升真实感
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(10, 5, 10);
scene.add(directionalLight);

camera.position.z = 15;

// 地球自转动画
function animate() {
  requestAnimationFrame(animate);
  earth.rotation.y += 0.005;
  renderer.render(scene, camera);
}
animate();

2. 添加经纬度标记点 #

通过经纬度转3D坐标函数，在地球表面添加自定义标记：

// 经纬度转地球表面3D坐标
function latLonToVector3(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 marker1Pos = latLonToVector3(39.9, 116.4, earthRadius + 0.1);
const marker1 = new THREE.Mesh(
  new THREE.SphereGeometry(0.12, 16, 16),
  new THREE.MeshBasicMaterial({ color: 0xff3333 })
);
marker1.position.copy(marker1Pos);
scene.add(marker1);

const marker2Pos = latLonToVector3(31.2, 121.5, earthRadius + 0.1);
const marker2 = new THREE.Mesh(
  new THREE.SphereGeometry(0.12, 16, 16),
  new THREE.MeshBasicMaterial({ color: 0x33ff33 })
);
marker2.position.copy(marker2Pos);
scene.add(marker2);

3. 绘制虚实结合的球面折线 #

将两点间的球面路径拆分为两段，分别使用实线和虚线材质：

// 生成两点间的平滑球面曲线
const curve = new THREE.CatmullRomCurve3([marker1Pos, marker2Pos], false, 'catmullrom', 0.5);
const totalPoints = curve.getPoints(60);

// 拆分曲线：前半段实线，后半段虚线
const splitIdx = Math.floor(totalPoints.length / 2);
const solidPoints = totalPoints.slice(0, splitIdx);
const dashedPoints = totalPoints.slice(splitIdx);

// 实线折线
const solidLineGeo = new THREE.BufferGeometry().setFromPoints(solidPoints);
const solidLineMat = new THREE.LineBasicMaterial({ color: 0xffffff, linewidth: 2 });
const solidLine = new THREE.Line(solidLineGeo, solidLineMat);
scene.add(solidLine);

// 虚线折线
const dashedLineGeo = new THREE.BufferGeometry().setFromPoints(dashedPoints);
const dashedLineMat = new THREE.LineDashedMaterial({
  color: 0xffffff,
  linewidth: 2,
  dashSize: 0.25,
  gapSize: 0.15
});
const dashedLine = new THREE.Line(dashedLineGeo, dashedLineMat);
dashedLine.computeLineDistances(); // 必须调用使虚线生效
scene.add(dashedLine);

可选优化 #

• 标记点替换为图标Sprite：加载自定义标记图标，用THREE.Sprite替代球体，视觉更直观
• 适配窗口大小：监听window.resize事件，动态调整相机宽高比和渲染器尺寸
• 交互功能：添加轨道控制器（OrbitControls），支持拖拽旋转地球视图

内容的提问来源于stack exchange，提问作者Bandish Sapphire