Three.js太阳系模拟实战：行星运动与着色器特效

1. 项目概述：Three.js太阳系模拟系统实战

去年接手一个天文馆的Web3D可视化项目时，我花了整整两周时间用Three.js重构太阳系模型。这个看似基础的需求，实际藏着许多教科书不会告诉你的实战细节——比如如何用Shader实现太阳的日冕效果，又比如怎样处理行星轨道计算的精度问题。今天我们就以这个太阳系实例为切入点，深入剖析Three.js在太空模拟中的核心技法。

这个太阳系模拟系统包含六大核心模块：行星运动系统、轨道可视化、特殊天体渲染（土星环）、恒星背景、太阳着色器特效以及多视角切换。不同于简单的几何体堆砌，要实现逼真的宇宙效果，需要综合运用Three.js的几何体创建、材质控制、动画系统和着色器编程。下面我将结合具体代码，逐层拆解实现过程中的关键技术点。

2. 核心模块实现解析

2.1 天体运动系统设计

行星运动是太阳系模拟的核心难点，需要同时处理两种运动：

javascript复制// 行星类基础结构
class Planet {
  constructor(radius, orbitRadius, orbitSpeed, rotationSpeed, texture) {
    this.mesh = new THREE.Mesh(
      new THREE.SphereGeometry(radius, 32, 32),
      new THREE.MeshStandardMaterial({ map: texture })
    );
    this.orbitRadius = orbitRadius;
    this.orbitSpeed = orbitSpeed; // 公转速度（弧度/帧）
    this.rotationSpeed = rotationSpeed; // 自转速度（弧度/帧）
    this.orbitAngle = Math.random() * Math.PI * 2;
  }

  update() {
    // 公转计算（椭圆轨道简化处理）
    this.orbitAngle += this.orbitSpeed;
    this.mesh.position.x = Math.cos(this.orbitAngle) * this.orbitRadius;
    this.mesh.position.z = Math.sin(this.orbitAngle) * this.orbitRadius * 0.9; // z轴压缩模拟椭圆
    
    // 自转处理
    this.mesh.rotation.y += this.rotationSpeed;
  }
}

关键细节说明：

1. 轨道椭圆率通过z轴坐标压缩实现（0.9系数）
2. 初始角度随机避免行星排列成直线
3. 速度单位使用弧度/帧保证不同刷新率下的稳定性

踩坑记录：直接使用Date.now()计算角度会导致高配设备动画过快，应采用帧率无关的增量计算

2.2 轨道可视化实现

轨道线需要特殊的几何体创建方式：

javascript复制function createOrbit(radius) {
  const points = [];
  for (let i = 0; i <= 64; i++) {
    const angle = (i / 64) * Math.PI * 2;
    points.push(new THREE.Vector3(
      Math.cos(angle) * radius,
      0,
      Math.sin(angle) * radius * 0.9 // 保持与行星相同的椭圆率
    ));
  }
  
  const geometry = new THREE.BufferGeometry().setFromPoints(points);
  const material = new THREE.LineBasicMaterial({ 
    color: 0x888888,
    transparent: true,
    opacity: 0.5
  });
  
  return new THREE.Line(geometry, material);
}

2.3 特殊天体渲染技巧

2.3.1 土星环实现方案

javascript复制const ringGeometry = new THREE.RingGeometry(innerRadius, outerRadius, 32);
const ringTexture = new THREE.TextureLoader().load('saturn_ring.jpg');
ringTexture.rotation = Math.PI / 4; // 纹理旋转角度

const ringMaterial = new THREE.MeshBasicMaterial({
  map: ringTexture,
  side: THREE.DoubleSide,
  transparent: true,
  opacity: 0.8
});

const rings = new THREE.Mesh(ringGeometry, ringMaterial);
rings.rotation.x = Math.PI / 2; // 使环面与轨道平面对齐
saturn.add(rings); // 作为土星子对象

2.3.2 太阳着色器特效

太阳表面需要自定义着色器实现光晕效果：

glsl复制// 片元着色器片段
uniform vec3 glowColor;
varying vec3 vNormal;

void main() {
  float intensity = pow(0.7 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 2.0);
  gl_FragColor = vec4(glowColor, 1.0) * intensity;
}

配合Three.js的着色器材质：

javascript复制const sunMaterial = new THREE.ShaderMaterial({
  uniforms: {
    glowColor: { value: new THREE.Color(0xffff00) }
  },
  vertexShader: sunVertexShader,
  fragmentShader: sunFragmentShader,
  blending: THREE.AdditiveBlending,
  side: THREE.BackSide
});

3. 高级功能实现

3.1 恒星背景生成

javascript复制const starGeometry = new THREE.BufferGeometry();
const starPositions = [];
const starColors = [];

for (let i = 0; i < 10000; i++) {
  // 球坐标系转笛卡尔坐标
  const radius = 1000 + Math.random() * 2000;
  const theta = Math.random() * Math.PI * 2;
  const phi = Math.acos(2 * Math.random() - 1);
  
  starPositions.push(
    radius * Math.sin(phi) * Math.cos(theta),
    radius * Math.sin(phi) * Math.sin(theta),
    radius * Math.cos(phi)
  );
  
  // 随机恒星颜色
  starColors.push(
    0.5 + Math.random() * 0.5,
    0.5 + Math.random() * 0.5,
    0.5 + Math.random() * 0.5
  );
}

starGeometry.setAttribute(
  'position',
  new THREE.Float32BufferAttribute(starPositions, 3)
);
starGeometry.setAttribute(
  'color',
  new THREE.Float32BufferAttribute(starColors, 3)
);

const stars = new THREE.Points(
  starGeometry,
  new THREE.PointsMaterial({
    size: 1.5,
    vertexColors: true,
    transparent: true,
    opacity: 0.8
  })
);
scene.add(stars);

3.2 视角切换控制

javascript复制const viewpoints = {
  earth: { position: new THREE.Vector3(0, 2, 10), target: earth.position },
  mars: { position: new THREE.Vector3(0, 3, 15), target: mars.position },
  // 其他行星视角...
};

function switchViewpoint(name) {
  gsap.to(camera.position, {
    x: viewpoints[name].position.x,
    y: viewpoints[name].position.y,
    z: viewpoints[name].position.z,
    duration: 2
  });
  
  controls.target.copy(viewpoints[name].target);
}

4. 性能优化与调试技巧

4.1 纹理加载优化方案

javascript复制const textureLoader = new THREE.TextureLoader();
const loadingManager = new THREE.LoadingManager();

// 显示加载进度
loadingManager.onProgress = (url, loaded, total) => {
  console.log(`Loading: ${loaded}/${total} - ${url}`);
};

// 统一错误处理
loadingManager.onError = (url) => {
  console.error(`Error loading: ${url}`);
};

// 创建带管理的加载器
const loader = new THREE.TextureLoader(loadingManager);

// 批量预加载
const textures = {
  earth: loader.load('textures/earth.jpg'),
  mars: loader.load('textures/mars.jpg'),
  // 其他纹理...
};

4.2 内存管理要点

javascript复制// 销毁场景时的清理
function disposeScene() {
  scene.traverse(object => {
    if (object.isMesh) {
      object.geometry.dispose();
      if (object.material.isMaterial) {
        cleanMaterial(object.material);
      } else if (Array.isArray(object.material)) {
        object.material.forEach(cleanMaterial);
      }
    }
  });
}

function cleanMaterial(material) {
  material.dispose();
  for (const key in material) {
    const value = material[key];
    if (value && typeof value.dispose === 'function') {
      value.dispose();
    }
  }
}

5. 常见问题解决方案

5.1 纹理映射异常处理

当遇到不规则几何体的纹理拉伸问题时，需要调整UV映射：

javascript复制geometry.computeBoundingBox();
const max = geometry.boundingBox.max;
const min = geometry.boundingBox.min;

const offset = new THREE.Vector2(0 - min.x, 0 - min.y);
const range = new THREE.Vector2(max.x - min.x, max.y - min.y);

const uvAttribute = geometry.getAttribute('uv');
for (let i = 0; i < uvAttribute.count; i++) {
  const u = (uvAttribute.getX(i) + offset.x) / range.x;
  const v = (uvAttribute.getY(i) + offset.y) / range.y;
  uvAttribute.setXY(i, u, v);
}

5.2 标签系统实现

使用Sprite创建行星标签：

javascript复制function createLabel(text, color = 0xffffff) {
  const canvas = document.createElement('canvas');
  canvas.width = 256;
  canvas.height = 128;
  const context = canvas.getContext('2d');
  
  // 绘制背景
  context.fillStyle = `rgba(0, 0, 0, 0.7)`;
  context.fillRect(0, 0, canvas.width, canvas.height);
  
  // 绘制文字
  context.font = 'Bold 40px Arial';
  context.fillStyle = `rgb(${color.r * 255}, ${color.g * 255}, ${color.b * 255})`;
  context.textAlign = 'center';
  context.fillText(text, canvas.width / 2, canvas.height / 2 + 15);
  
  const texture = new THREE.CanvasTexture(canvas);
  const material = new THREE.SpriteMaterial({ map: texture });
  const sprite = new THREE.Sprite(material);
  sprite.scale.set(1, 0.5, 1);
  
  return sprite;
}

// 为地球添加标签
const earthLabel = createLabel('Earth', new THREE.Color(0x00a0ff));
earthLabel.position.set(0, earthRadius + 0.5, 0);
earth.add(earthLabel);

6. 模型加载与高级特性

6.1 加载外部3D模型

javascript复制import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const loader = new GLTFLoader();
loader.load(
  'models/spacecraft.glb',
  (gltf) => {
    const spacecraft = gltf.scene;
    spacecraft.scale.set(0.5, 0.5, 0.5);
    spacecraft.position.set(0, 0, 5);
    scene.add(spacecraft);
    
    // 模型加载后的回调
    startAnimation();
  },
  (xhr) => {
    console.log((xhr.loaded / xhr.total * 100) + '% loaded');
  },
  (error) => {
    console.error('Error loading model:', error);
  }
);

6.2 经纬度坐标转换

javascript复制function latLongToVector3(lat, long, radius) {
  const phi = (90 - lat) * (Math.PI / 180);
  const theta = (long + 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 markerPos = latLongToVector3(39.9, 116.4, earthRadius * 1.01);
const marker = createMarker(markerPos, 0xff0000);
earth.add(marker);

7. 水体特效实现方案

虽然Three.js没有内置的水体属性，但可以通过自定义着色器模拟：

javascript复制const waterUniforms = {
  time: { value: 0 },
  resolution: { value: new THREE.Vector2() },
  flowDirection: { value: new THREE.Vector2(0.5, 0.5) }
};

const waterShader = {
  uniforms: waterUniforms,
  vertexShader: `...`, // 自定义顶点着色器
  fragmentShader: `...` // 自定义片元着色器
};

function animate() {
  waterUniforms.time.value += 0.01;
  // 其他动画...
}

专业建议：对于复杂水体效果，推荐使用three.js的后期处理通道结合噪声纹理实现波纹效果