引言
在现代 Web 开发中，Three.js 已成为实现令人惊叹的 3D 图形和可视化效果的重要工具。无论是在数据可视化、游戏开发，还是虚拟现实中，Three.js 都展现了其强大的功能。今天呆同学将带各位一步步探索如何使用 Three.js 创建一个简单而迷人的 3D 地球仪。从环境搭建到实现平滑的动画效果，我将详细讲解每个步骤，并提供完整的代码示例，一起快速入门 Three.js，实现炫酷的 3D 效果。如果你对 3D 图形感兴趣，或者希望将 Three.js 的强大功能应用到自己的项目中，这将是一个很好的起点。
Three.js 简介
什么是 Three.js？
Three.js 是一个基于 JavaScript 的 3D 图形库，它能够在浏览器中利用 WebGL 技术渲染复杂的三维场景。通过 Three.js，开发者无需深入了解底层的 WebGL 代码，即可轻松实现 3D 模型、动画、材质等效果。
Three.js 的基本概念和组件
- Camera（相机） : 相机定义了观察场景的视角。在 Three.js 中，有多种类型的相机可以选择，例如透视相机（
THREE.PerspectiveCamera）和正交相机（THREE.OrthographicCamera）。 - Scene（场景） : 场景是 3D 对象的容器，所有的 3D 模型、光源、相机等都需要添加到场景中才能被渲染。
- Renderer（渲染器） : 渲染器负责将场景中的 3D 对象渲染到屏幕上。在 Three.js 中，常用的渲染器是
THREE.WebGLRenderer，它利用 WebGL 技术进行高效的图形渲染。
Three.js 在数据可视化中的应用
Three.js 的强大之处在于它不仅限于 3D 模型的展示，还可以在数据可视化领域大显身手。通过将复杂的多维数据映射到 3D 空间中，Three.js 能够帮助开发者创建更具交互性和直观性的可视化工具，使用户更容易理解和分析数据。无论是构建 3D 图表、地理信息系统，还是虚拟现实中的数据展示，Three.js 都能够提供强有力的支持。
而今天我们先通过打造一个 3D 地球模型来学习基础的 Three.js 的使用。
项目准备
在开始构建 3D 地球仪之前，我们需要先搭建好开发环境，并引入 Three.js 库。同时准备好一张地球图片。
环境搭建：引入 Three.js 库
要在项目中使用 Three.js，首先需要在 HTML 文件中引入该库。Three.js 提供了多种方式来引入，包括通过 CDN 链接、NPM 安装，或者直接下载库文件。为了简单起见，我们使用 CDN 链接来引入 Three.js。
在 HTML 文件的 <head> 部分添加以下代码：
<!-- 引入 Three.js 库 -->
<script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>
HTML 结构
接下来，我们需要创建一个用于渲染 3D 场景的 Canvas 元素，并设置基本的 HTML 结构。这是我们 3D 地球仪渲染的目标。
<body>
<!-- 创建一个 Canvas 元素，用于 3D 渲染 -->
<canvas id="webglcanvas"></canvas>
<script>
// Three.js 初始化代码将在这里编写
</script>
</body>
初始化 Three.js
在完成项目的基本设置后，我们需要初始化 Three.js 的核心组件：相机、场景和渲染器。这些组件将共同构成一个完整的 3D 渲染流程，帮助我们在浏览器中显示 3D 地球仪。
创建相机、场景和渲染器
首先，我们需要在 JavaScript 中创建 Three.js 的相机、场景和渲染器。
<script>
let canvas; // 3D 容器
let camera, scene, renderer; // 相机、场景和渲染器
// 初始化函数
function init() {
// 获取 Canvas 元素
canvas = document.getElementById('webglcanvas');
// 创建相机
camera = new THREE.PerspectiveCamera(
60, // 视角
window.innerWidth / window.innerHeight, // 宽高比
1, // 近剪裁面
2000 // 远剪裁面
);
camera.position.z = 500; // 设置相机位置
// 创建场景
scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff); // 设置背景色为白色
// 创建渲染器
renderer = new THREE.WebGLRenderer({
canvas: canvas, // 绑定渲染目标
antialias: true // 开启抗锯齿
});
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器尺寸
}
// 调用初始化函数
init();
</script>
在这段代码中，我们执行了以下操作：
- 创建相机（Camera） : 使用
THREE.PerspectiveCamera创建一个透视相机，并设置了视角、宽高比、近剪裁面和远剪裁面。相机的位置被设置在 z 轴的 500 单位处，这样可以从远处观察整个场景。 - 创建场景（Scene） : 使用
THREE.Scene创建一个空的 3D 场景，并将背景色设置为白色。 - 创建渲染器（Renderer） : 使用
THREE.WebGLRenderer创建渲染器，并将它绑定到我们之前创建的 Canvas 元素上。开启抗锯齿以提高渲染质量，并设置渲染器的尺寸为浏览器窗口的宽高。
渲染器创建完成后，我们已经将 Canvas 元素指定为渲染目标。此时，所有渲染输出将显示在这个 Canvas 中。接下来，我们可以开始加载 3D 对象，并将其添加到场景中进行展示。
加载和展示 3D 对象
在 3D 场景中展示地球仪，需要创建一个球体并为其添加地球的纹理。这些步骤包括创建几何体、加载材质并将它们结合为一个 3D 对象。
let group; // 用于组合多个 3D 对象的组
function init() {
// 之前的初始化代码...
// 创建一个 Group，将多个对象组合在一起
group = new THREE.Group();
scene.add(group); // 将组添加到场景中
}
我们通过THREE.SphereGeometry 创建一个球体几何体，并为其设置合适的参数，通过 THREE.TextureLoader 加载地球的图片，再通过THREE.MeshBasicMaterial将其应用为球体的材质
function init() {
// 之前的初始化代码...
// 使用 TextureLoader 加载地球的纹理图像
let loader = new THREE.TextureLoader();
loader.load('earth.jpg', function (texture) {
// 创建球体几何体
let geometry = new THREE.SphereGeometry(200, 20, 20);
// 创建材质并应用纹理
let material = new THREE.MeshBasicMaterial({
map: texture
});
// 创建球体网格并将其添加到组中
let mesh = new THREE.Mesh(geometry, material);
group.add(mesh); // 将球体添加到组中
});
// 背景图
let bgLoader = new THREE.TextureLoader();
bgLoader.load('bgearth.jfif', function (texture) {
scene.background = texture;
})
}
load 方法，用于加载指定路径的图像文件（这里是 earth.jpg），当图像加载完成后，后面的回调函数将被调用。在这个回调函数中，texture 参数表示加载完成的纹理对象。你可以使用这个 texture 将图像应用到 3D 对象的材质上。具体来说，这里将加载的 texture 应用到一个球体的材质上，从而使球体显示为地球的图像。
同样的道理，我使用 THREE.TextureLoader 加载背景图片，并将其设置为 scene.background。设置好背景图后，背景图将会自动显示在地球仪的后方，无论地球仪如何旋转，背景图都会保持静止，充当场景的背景。
这里创建的球体几何体 THREE.SphereGeometry，参数分别表示半径、宽度分段和高度分段。创建了一个网格 THREE.Mesh，将几何体和材质结合为一个 3D 对象。最后，将这个 3D 对象添加到之前创建的组 group 中。
这样我们已经成功地将一个 3D 地球仪加载到场景中，接下来可以为其添加动画效果，使其旋转和渲染。
动画效果
在创建完 3D 地球仪并将其加载到场景中后，接下来可以为它添加动画效果，使其能够平滑地旋转。我们可以使用 requestAnimationFrame 来实现这一效果，同时调整渲染频率以保证性能。
requestAnimationFrame 是浏览器提供的一个 API，用于创建高效的动画循环。它能够根据显示器的刷新率自动调整帧数，通常每秒刷新 60 次（即 60 FPS）。与传统的 setInterval 或 setTimeout 不同，requestAnimationFrame 更适合创建平滑的动画，因为它能够避免卡顿和跳帧现象。
function animate() {
// 使用 requestAnimationFrame 注册下一帧的动画
requestAnimationFrame(animate);
// 渲染场景
render();
}
在这个 animate 函数中，每次调用 requestAnimationFrame 时，都会自动请求下一帧的动画。这种递归调用的方式可以确保动画流畅地进行。
接下来使球体旋转，并调整渲染频率以提升性能
在实现平滑动画的基础上，我们可以让球体缓慢旋转，使地球仪看起来更生动。通过修改 group 对象的旋转属性，可以轻松实现这一效果。
function render() {
// 使球体沿 Y 轴缓慢旋转
group.rotation.y -= 0.005;
// 渲染场景
renderer.render(scene, camera);
}
在这个 render 函数中，我们对 group.rotation.y 进行了小幅度的递减，这会让球体在每帧动画中都缓慢旋转。负值表示逆时针旋转，正值则表示顺时针旋转。
最终，通过 renderer.render(scene, camera) 将当前帧的场景渲染到 Canvas 中。
为了启动动画，我们需要调用 animate() 函数
// 初始化 Three.js 设置后，启动动画
init();
animate();
通过以上步骤，我们能够创建一个具有平滑旋转动画的 3D 地球仪，并保证动画流畅度，一起来看看效果吧。
效果展示
关于提升性能
虽然 requestAnimationFrame 已经是高效的动画方法，但在处理复杂的 3D 场景时，性能仍然可能受到影响。为了进一步优化性能，可以考虑以下几种策略：
- 减少场景中的复杂对象: 简化几何体的分段数，降低渲染复杂度。
- 调整动画频率: 通过控制旋转速度或减少某些不必要的渲染操作，减轻渲染压力。
- 优化材质和纹理: 使用低分辨率的纹理或压缩纹理格式，以减小 GPU 负担。
总结
通过今天的学习，初步掌握了 Three.js 的基本用法，能够创建简单的 3D 场景并进行基本的渲染和动画操作。虽然目前只涉及了一些基础内容，但已经感受到了 Three.js 的强大功能。接下来，可以进一步深入学习 Three.js 的更多高级功能，例如光照、材质、交互等，以更好地运用在实际项目中。
期待后面的分享，如果你觉得有趣，别忘了点赞收藏加关注哦
