资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

3D Earth with Three.js

创作时间:

作者:

@小白创作中心

3D Earth with Three.js

引用

来源

https://docs.pingcode.com/baike/2272192

使用JavaScript制作地球的方法包括：利用WebGL、使用Three.js库、应用Mapbox和D3.js。在这篇文章中，我们将详细介绍如何使用Three.js库来创建一个3D地球模型。Three.js是一个基于WebGL的JavaScript库，它可以帮助开发者更轻松地创建和展示3D图形。我们将分步讲解如何从零开始构建一个3D地球模型，包括设置场景、添加光源、创建地球材质和实现交互等。

一、准备工作

在开始之前，我们需要准备一些基础工具和素材：

HTML和JavaScript环境：确保你的开发环境可以运行HTML和JavaScript代码，推荐使用Visual Studio Code或其他现代代码编辑器。
Three.js库：可以通过CDN加载或者下载到本地使用。
地球纹理图像：可以从NASA等网站下载免费的地球纹理图像。

1. 安装和引入Three.js

首先，我们需要引入Three.js库，可以通过以下方式在HTML文件中加载Three.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Earth with Three.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <div id="container"></div>
    <script src="main.js"></script>
</body>
</html>

接下来，我们将在main.js文件中编写JavaScript代码。

二、初始化场景

1. 创建场景、相机和渲染器

Three.js中的3D场景由多个部分组成，包括场景（Scene）、相机（Camera）和渲染器（Renderer）。我们需要先初始化这些基本组件：

// 初始化场景
const scene = new THREE.Scene();
// 初始化相机
const camera = new THREE.PerspectiveCamera(
    75, // 视角（FOV）
    window.innerWidth / window.innerHeight, // 宽高比
    0.1, // 近剪切面
    1000 // 远剪切面
);
camera.position.z = 5; // 设置相机位置
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);

2. 添加光源

光源是3D场景中不可或缺的一部分。它决定了物体的亮度和阴影效果。在这里，我们添加一个点光源和环境光：

// 创建点光源
const pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);
// 创建环境光
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

三、创建地球模型

1. 加载地球纹理

我们需要使用地球的纹理图像来创建真实感较强的地球表面。首先，确保你的项目目录中包含地球纹理图像，例如earth.jpg。

const textureLoader = new THREE.TextureLoader();
const earthTexture = textureLoader.load('path/to/earth.jpg');

2. 创建地球几何体和材质

接下来，我们使用SphereGeometry创建一个球体，并将加载的纹理应用到球体上：

const geometry = new THREE.SphereGeometry(1, 32, 32); // 半径为1，32个宽度段和高度段
const material = new THREE.MeshPhongMaterial({
    map: earthTexture
});
const earth = new THREE.Mesh(geometry, material);
scene.add(earth);

四、添加动画和交互

1. 动画循环

为了让地球旋转起来，我们需要在渲染循环中更新地球的旋转角度：

function animate() {
    requestAnimationFrame(animate);
    // 地球旋转
    earth.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

2. 用户交互

为了增加用户的交互体验，我们可以添加鼠标控制功能。Three.js提供了OrbitControls库来实现这一点：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/controls/OrbitControls.js"></script>

然后在main.js中添加以下代码：

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用阻尼（惯性）
controls.dampingFactor = 0.25;
controls.enableZoom = true;

五、优化和扩展

1. 性能优化

对于较大的3D场景和复杂的模型，性能优化显得尤为重要。可以通过以下方式优化性能：

减少几何体的复杂度：降低几何体的分段数。
使用低分辨率纹理：使用适当分辨率的纹理图像。
减少光源数量：尽量减少场景中的光源数量。

2. 添加大气层效果

为了增加地球的真实感，可以添加一个半透明的球体作为地球的大气层：

const atmosphereGeometry = new THREE.SphereGeometry(1.1, 32, 32);
const atmosphereMaterial = new THREE.MeshBasicMaterial({
    color: 0x00aaff,
    side: THREE.BackSide,
    transparent: true,
    opacity: 0.2
});
const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
scene.add(atmosphere);

3. 添加星空背景

为了使场景更加生动，可以添加一个星空背景：

const starGeometry = new THREE.SphereGeometry(100, 64, 64);
const starMaterial = new THREE.MeshBasicMaterial({
    map: textureLoader.load('path/to/stars.jpg'),
    side: THREE.BackSide
});
const stars = new THREE.Mesh(starGeometry, starMaterial);
scene.add(stars);