前言
最近也是找到暑假实习了，可以不用天天背八股了，开始学点新的技术吧。
three.js
简介
Three.js 是一个基于 WebGL 的轻量级 3D 图形库，它简化了在网页中创建和展示 3D 对象的过程。通过 Three.js，开发者可以轻松地将 3D 模型、动画、光照等复杂效果集成到网页应用中。
Three.js 提供了丰富的功能，包括：
- 支持多种几何形状（立方体、球体、圆柱等）
- 灯光系统（环境光、点光源、聚光灯等）
- 材质和纹理贴图
- 动画支持
- 相机控制（正交相机、透视相机）
这篇文章将带你一步步了解如何使用 Three.js 创建一个简单的 3D 场景。
在开始构建一个 3D 图形时，我们先来了解一下基本概念。
基础
1. 场景（Scene）
场景就像是一个容器，用于存放所有要渲染的对象，比如模型、光源、相机等。在 Three.js 里，所有可视化内容都需要添加到场景中才能被渲染出来。
js
// 初始化场景
const scene = new THREE.Scene();2. 相机（Camera）
相机决定了场景中哪些内容会被渲染到屏幕上，以及以什么样的视角来呈现。不同类型的相机有不同的投影方式，常见的有透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。透视相机模拟人眼观察世界的方式，有近大远小的效果。
js
// 初始化相机，参数分别为视角、宽高比、近裁剪面、远裁剪面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;75：视角（fov），表示相机视野的角度。window.innerWidth / window.innerHeight：宽高比（aspect），影响渲染画面的比例。0.1：近裁剪面（near），距离相机小于该值的物体不会被渲染。1000：远裁剪面（far），距离相机大于该值的物体不会被渲染。
3. 几何体（Geometry）
几何体定义了 3D 对象的形状，它包含了对象的顶点、面等几何信息。BoxGeometry 用于创建立方体的几何体。
js
// 创建立方体的几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);4. 材质（Material）
材质决定了 3D 对象的外观，比如颜色、光泽、透明度等。MeshBasicMaterial 是一种基础材质，不受光照影响。
js
// 创建材质，设置颜色为绿色
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });5. 网格（Mesh）
网格是几何体和材质的组合，将几何体的形状和材质的外观结合起来，形成一个完整的 3D 对象。
js
// 创建网格对象，将几何体和材质组合
const cube = new THREE.Mesh(geometry, material);6. 渲染器（Renderer）
渲染器负责将场景和相机组合，把 3D 场景渲染成 2D 图像显示在屏幕上。WebGLRenderer 是最常用的渲染器，它利用 WebGL 技术进行高性能渲染。
js
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);了解了这些概念我们就可以来做个立方体了。
代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js Cube</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="script.js"></script>
</body>
</html>
js
// 初始化场景
const scene = new THREE.Scene();
// 初始化相机，参数分别为视角、宽高比、近裁剪面、远裁剪面
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建立方体的几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建材质，设置颜色为绿色
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建网格对象，将几何体和材质组合
const cube = new THREE.Mesh(geometry, material);
// 将立方体添加到场景中
scene.add(cube);
renderer.render(scene, camera);解释：
这时候长的帅的读者提问了，这不就是一个平面吗？哪里是立方体呢？
原因是，我们只改变了相机的 z 轴方向 => camera.position.z = 5;，如果这个都没有，那就什么都显示不出来，因为相机和图形默认都在中心的位置。改变 z 轴方向，当然看不到两边，只能看到平面了，这时候加上：
js
camera.position.x = -1;
camera.position.y = 1;
这时候就有点立方体的感觉了。
如果还想让立方体转起来的话，就需要用到 requestAnimationFrame 了：
js
// 渲染循环函数
function animate() {
requestAnimationFrame(animate);
// 让立方体旋转
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
// 启动渲染循环
animate();解释：
渲染循环（Animation Loop）
渲染循环是一个不断调用渲染函数的循环，用于实时更新场景。requestAnimationFrame 是浏览器提供的 API，用于在下一次重绘之前执行回调函数，实现平滑的动画效果。
结语：
关注我，慢慢学习新知识。😁