three.js入门案例——制作3D地球

使用 Three.js 制作 3D 地球：初学者指南

作为一名 3D 图形爱好者，我最近被 Three.js 的魅力所吸引。为了深入了解这个库，我决定动手制作一个简单的 3D 地球模型。在本指南中，我将逐步向您展示如何使用 Three.js 创建自己的逼真的地球。

Three.js 简介

Three.js 是一个强大的 JavaScript 库，用于创建和渲染逼真的 3D 图形。它建立在 WebGL 之上，这是一个跨浏览器的 API，用于在网页上渲染交互式 3D 内容。借助 Three.js，您可以创建各种 3D 对象，包括模型、粒子、线条和文字。

创建 Three.js 场景

一个场景是 Three.js 中用来容纳所有 3D 对象的容器。要创建一个场景，请使用 new THREE.Scene() 方法。

const scene = new THREE.Scene();

添加地球模型

Three.js 提供了一个内建的球体几何体，我们可以用它来创建地球模型。要添加一个地球模型，请使用 THREE.SphereGeometry 类和 THREE.MeshLambertMaterial 类。

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshLambertMaterial({color: 0x0077ff});
const earth = new THREE.Mesh(geometry, material);

添加灯光

为了让地球模型看起来更逼真，我们添加了一个平行光。要创建一个平行光，请使用 THREE.DirectionalLight 类。

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10, 10, 10);
scene.add(light);

设置相机

相机控制着场景的视角。要创建一个透视相机，请使用 THREE.PerspectiveCamera 类。

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);

渲染场景

最后，我们需要使用一个渲染器将场景渲染到画布上。要创建一个 WebGL 渲染器，请使用 THREE.WebGLRenderer 类。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

运行程序

现在，我们可以使用 requestAnimationFrame() 函数运行程序，以连续渲染场景并使其随着时间的推移而旋转。

function animate() {
  requestAnimationFrame(animate);

  earth.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

常见问题解答

1. 如何更改地球的大小？
通过修改 THREE.SphereGeometry 构造函数中的第一个参数（半径）来更改地球的大小。

2. 如何更改地球的颜色？
修改 THREE.MeshLambertMaterial 构造函数中的 color 属性以更改地球的颜色。

3. 如何添加云层？
要添加云层，请使用 THREE.TextureLoader 加载云层纹理，并将其作为 THREE.MeshBasicMaterial 的 map 属性应用到新的球体几何体中。

4. 如何添加自转？
在 animate() 函数中，通过修改 earth.rotation.y += 0.01; 行来添加自转。

5. 如何添加公转？
在 animate() 函数中，通过修改 earth.rotation.z += 0.001; 行来添加公转。

结论

恭喜！您已经成功使用 Three.js 创建了一个 3D 地球模型。通过遵循本指南中的步骤，您可以进一步扩展您的模型，添加更多功能并创建您自己的逼真的 3D 场景。 Three.js 的可能性无穷无尽，因此释放您的想象力，尽情创造吧！