【three.js系列七】入门教程——地球自转和月球围绕转

前言

没想到《three.js系列》已经更新到第七集了~ 我也是想到哪更新到哪，哈哈哈~ 主打一个快乐学习。貌似还挺多宝宝喜欢这个系列的。

这俩天忙到腱鞘炎~ 作为程序员👨🏻‍💻，2只手1个头常常感觉不够用吧，为此常常羡慕小哪吒可以三头六臂~~~~~~~

希望大家多注意身体健康，然后快乐学习呀~

demo开始的地方

本 Demo 演示了如何使用 Three.js 创建地球和月球并使其旋转。该 Demo 涉及以下知识点：

1. Three.js 基础知识

• THREE.Scene: 用于创建和管理 3D 场景中的对象。
• THREE.PerspectiveCamera: 创建透视相机。
• THREE.WebGLRenderer: 用于渲染 3D 场景。
• THREE.SphereGeometry: 创建球体几何体。
• THREE.MeshBasicMaterial: 创建基本材质。
• THREE.Mesh: 将几何体和材质组合成可渲染的网格对象。
• THREE.AmbientLight: 添加环境光。
• THREE.PointLight: 添加点光源。
• requestAnimationFrame: 请求浏览器在下一次重绘之前调用指定的函数。

2. 地球和月球模型创建

• 创建地球和月球的球体几何体。
• 加载地球和月球的纹理图片。
• 创建地球和月球的材质，并设置纹理。
• 创建地球和月球的网格对象，并添加到场景中。
• 设置地球和月球的初始位置和大小。

3. 添加光照

• 创建环境光，为场景中的所有对象提供基本照明。
• 创建点光源，为地球和月球提供更亮的光照。

4. 创建动画

• 使用 requestAnimationFrame 函数创建动画循环。
• 在动画循环中，更新地球和月球的旋转角度。
• 渲染场景。

5. 加快月球自转速度

• 修改 moon.rotation.y 的更新值以加快月球自转速度。

完整代码

import * as THREE from "three";

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 20;

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建地球几何体
const earthGeometry = new THREE.SphereGeometry(8, 32, 32);

// 创建地球材质
const earthMaterial = new THREE.MeshBasicMaterial({
  map: new THREE.TextureLoader().load('./assets/textures/earth.jpg')
});

// 创建地球
const earth = new THREE.Mesh(earthGeometry, earthMaterial);
scene.add(earth);

// 创建月球几何体
const moonGeometry = new THREE.SphereGeometry(2, 16, 16);

// 创建月球材质
const moonMaterial = new THREE.MeshBasicMaterial({
  map: new THREE.TextureLoader().load('./assets/textures/moon.jpg')
});

// 创建月球
const moon = new THREE.Mesh(moonGeometry, moonMaterial);
moon.position.set(15, 0, 0);
scene.add(moon);

// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// 添加点光源
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(10, 10, 10);
scene.add(pointLight);

// 创建动画循环
function animate() {
  requestAnimationFrame(animate);

  // 地球自转
  earth.rotation.y += 0.01;

  // 月球绕地球公转————调整速度请改“2”，x和z的数值需统一，不然会‘闪现’~ 哈哈
  moon.position.x = Math.cos(2 * Date.now() / 1000) * 15;
  moon.position.z = Math.sin(2 * Date.now() / 1000) * 15;

   // 加快月球自转速度
   moon.rotation.y += 0.03; 

  // 渲染场景
  renderer.render(scene, camera);
}

animate();

效果

素材