Three.js - 模拟太阳、地球、月亮的运动

些耨努 · 2025-6-1 19:03:21

简介
本节我们简单的模拟地球绕着太阳转，月球绕着地球转。从月球的角度看，它是在地球的 "局部空间 "中绕着地球转，地球和月球合成一组是在全局空间绕着太阳转。
基础场景

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="1000" height="500"></canvas>
</body>
</html>

复制代码

添加背景

添加星空背景，修改背景展示图片纹理。
1. const bgTexture = loader.load('../img/4.jpg')
2. scene.background = bgTexture
复制代码
添加太阳
1. // 物体网格对象
2. const objects = []
3. // 一球多用
4. const radius = 2
5. const widthSegments = 36
6. const heightSegments = 36
7. const sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments)
8. // 太阳
9. const sunTexture = loader.load('../img/1.jpg')
10. const sunMaterial = new THREE.MeshBasicMaterial({ map: sunTexture }) const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial)
11. // 放大3倍
12. sunMesh.scale.set(3, 3, 3)
13. scene.add(sunMesh)
14. // 放入控制对象
15. objects.push(sunMesh)
复制代码
- 创建一个球几何体，太阳、地球、月亮都是球形，我们可以公用一个球体。
- 使用基础材质加载太阳纹理。因为灯光是点光源，发光点在中心，太阳也在中心，使用其他材质是无法接收光源。
- 太阳比其他球体大，放大3倍。
- 1. // 网格对象旋转
  2. objects.forEach((obj) => {obj.rotation.y = time })
  复制代码
  在渲染循环中添加，使网格对象(objects)中的物体旋转。
- 添加地球
- 1. // 地球
  2. const earthTexture = loader.load('../img/3.jpg')
  3. const earthMaterial = new THREE.MeshPhongMaterial({ map: earthTexture })
  4. const earthMesh = new THREE.Mesh(sphereGeometry, earthMaterial) earthMesh.position.x = 20
  5. scene.add(earthMesh)
  6. // 放入控制对象
  7. objects.push(earthMesh)
  复制代码
  View Code这里重复使用sphereGeometry球几何体，创建.MeshPhongMaterial()材质。将其定位在太阳的左边 20个单位。
  - 可以看到太阳和地球都在自转，但地球并没有绕着太阳转。
  - 如果我们通过计算的方式修改地球的全局坐标围绕太阳转是可以的，但是这样很麻烦。这里我们添加一个新场景太阳系，把地球和太阳都放入场景中，旋转太阳系这个场景，因为太阳在中心，实现的效果就是地球围绕太阳转。
  - // 太阳系物体对象
    const solarSystem = new THREE.Object3D()
    scene.add(solarSystem)
    objects.push(solarSystem)
    solarSystem.add(sunMesh)
    solarSystem.add(earthMesh)
    复制代码
    添加月球
  - 同样的月球要围绕地球转，添加一个地月系到太阳系中旋转。
  - // 地月系物体对象
    const landOrbit = new THREE.Object3D()
    landOrbit.position.x = 20
    solarSystem.add(landOrbit)
    objects.push(landOrbit)
    复制代码
    定位地月系位置到原来地球的位置放入太阳系中，取消地球的定位和取消放入太阳系中
  - // 月球
    const moonTexture = loader.load('../img/2.jpg')
    const moonMaterial = new THREE.MeshPhongMaterial({ map: moonTexture }) const moonMesh = new THREE.Mesh(sphereGeometry, moonMaterial) moonMesh.scale.set(0.5, 0.5, 0.5)
    moonMesh.position.x = 5
    objects.push(moonMesh)
    // 加入地月系
    landOrbit.add(earthMesh)
    landOrbit.add(moonMesh)
    复制代码
    定位月球在地球左边5个单位，并缩小体积。然后全部加入地月系中。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册

Three.js - 模拟太阳、地球、月亮的运动

相关帖子

浏览过的版块

签约作者

Three.js - 模拟太阳、地球、月亮的运动

相关帖子

相关推荐

浏览过的版块

签约作者