从0开始学习three.js(1)😁

前言

最近也是找到暑假实习了，可以不用天天背八股了，开始学点新的技术吧。

three.js

简介

Three.js 是一个基于 WebGL 的轻量级 3D 图形库，它简化了在网页中创建和展示 3D 对象的过程。通过 Three.js，开发者可以轻松地将 3D 模型、动画、光照等复杂效果集成到网页应用中。

Three.js 提供了丰富的功能，包括：

• 支持多种几何形状（立方体、球体、圆柱等）
• 灯光系统（环境光、点光源、聚光灯等）
• 材质和纹理贴图
• 动画支持
• 相机控制（正交相机、透视相机）

这篇文章将带你一步步了解如何使用 Three.js 创建一个简单的 3D 场景。

在开始构建一个 3D 图形时，我们先来了解一下基本概念。

---

基础

1. 场景（Scene）

场景就像是一个容器，用于存放所有要渲染的对象，比如模型、光源、相机等。在 Three.js 里，所有可视化内容都需要添加到场景中才能被渲染出来。

// 初始化场景
const scene = new THREE.Scene();

2. 相机（Camera）

相机决定了场景中哪些内容会被渲染到屏幕上，以及以什么样的视角来呈现。不同类型的相机有不同的投影方式，常见的有透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。透视相机模拟人眼观察世界的方式，有近大远小的效果。

// 初始化相机，参数分别为视角、宽高比、近裁剪面、远裁剪面
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 用于创建立方体的几何体。

// 创建立方体的几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

4. 材质（Material）

材质决定了 3D 对象的外观，比如颜色、光泽、透明度等。MeshBasicMaterial 是一种基础材质，不受光照影响。

// 创建材质，设置颜色为绿色
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

5. 网格（Mesh）

网格是几何体和材质的组合，将几何体的形状和材质的外观结合起来，形成一个完整的 3D 对象。

// 创建网格对象，将几何体和材质组合
const cube = new THREE.Mesh(geometry, material);

6. 渲染器（Renderer）

渲染器负责将场景和相机组合，把 3D 场景渲染成 2D 图像显示在屏幕上。WebGLRenderer 是最常用的渲染器，它利用 WebGL 技术进行高性能渲染。

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

了解了这些概念我们就可以来做个立方体了。

---

代码：

<!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/three@0.132.2/build/three.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

// 初始化场景
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 轴方向，当然看不到两边，只能看到平面了，这时候加上：

camera.position.x = -1;
camera.position.y = 1;

这时候就有点立方体的感觉了。

---

如果还想让立方体转起来的话，就需要用到 requestAnimationFrame 了：

// 渲染循环函数
function animate() {
    requestAnimationFrame(animate);

    // 让立方体旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}

// 启动渲染循环
animate();

解释：

渲染循环（Animation Loop）

渲染循环是一个不断调用渲染函数的循环，用于实时更新场景。requestAnimationFrame 是浏览器提供的 API，用于在下一次重绘之前执行回调函数，实现平滑的动画效果。

---

结语：

关注我，慢慢学习新知识。😁