Three.js 从入门到放弃？No！带你 5 分钟搞懂基础概念

最新推荐文章于 2025-03-17 20:42:37 发布

全栈探索者chen

最新推荐文章于 2025-03-17 20:42:37 发布

阅读量871

点赞数 24

分类专栏： threeJS 文章标签： javascript 开发语言 ecmascript 程序人生前端 three.js 3d

本文链接：https://blog.csdn.net/mmc123125/article/details/145131424

版权

threeJS 专栏收录该内容

24 篇文章

订阅专栏

Three.js 从入门到放弃？No！带你 5 分钟搞懂基础概念

在这里插入图片描述

Three.js 是一个基于 WebGL 的强大 JavaScript 库，专门用来创建和展示 3D 内容。如果你曾被 “3D 开发太难了” 的想法吓到，今天这篇文章就是为你准备的。我们用最简单的语言，5 分钟搞懂 Three.js 的核心概念，并用一段最基础的代码点亮你的 3D 世界。

一、Three.js 的核心概念

想象一下，你要在现实生活中搭建一个舞台。需要什么？

舞台（场景 Scene）
舞台是所有表演的地方。在 Three.js 中，场景就是用来容纳所有 3D 对象的空间。
观众的视角（相机 Camera）
相机就像观众的眼睛，负责从特定的角度去观察舞台上的内容。
灯光（Lights）
没有灯光，再华丽的场景也会一片漆黑。
演员（几何体 Geometry 和材质 Material）
演员就是场景中的物体，例如立方体、球体，甚至是复杂的 3D 模型。
导演（渲染器 Renderer）
渲染器负责把所有这些元素“拍成”一张图，然后呈现在你的浏览器中。

二、Three.js 的最小代码示例

下面我们用一段简单的代码实现一个基本的 3D 场景，包括一个旋转的立方体。

代码准备

在你的项目中引入 Three.js：

使用 CDN 引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

或者使用 npm 安装：
```
npm install three
```

创建一个 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 简单示例</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script>
        // 在这里编写 Three.js 代码
    </script>
</body>
</html>

基础代码实现

下面是完整的 JavaScript 示例代码：

// 1. 创建场景
const scene = new THREE.Scene();

// 2. 创建相机（透视相机）
const camera = new THREE.PerspectiveCamera(
    75, // 视角
    window.innerWidth / window.innerHeight, // 宽高比
    0.1, // 近剪裁面
    1000 // 远剪裁面
);
camera.position.z = 5; // 相机位置

// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染尺寸
document.body.appendChild(renderer.domElement); // 将渲染器添加到 HTML

// 4. 创建几何体（立方体）
const geometry = new THREE.BoxGeometry(); // 几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 材质
const cube = new THREE.Mesh(geometry, material); // 网格 = 几何体 + 材质
scene.add(cube); // 添加到场景

// 5. 渲染循环
function animate() {
    requestAnimationFrame(animate); // 循环调用
    cube.rotation.x += 0.01; // 旋转立方体
    cube.rotation.y += 0.01;
    renderer.render(scene, camera); // 渲染场景
}
animate();

代码解释

1. 创建场景

const scene = new THREE.Scene();

场景是所有 3D 对象的容器，用来存放物体、灯光等元素。

2. 创建相机

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

透视相机模拟了人眼的视角，它的 4 个参数分别是：

视角（fov）：视野的广度（以角度表示）。
宽高比（aspect）：通常是浏览器窗口的宽高比。
近剪裁面（near） 和 远剪裁面（far）：定义相机能看到的范围。

3. 创建渲染器

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

渲染器将场景和相机的数据渲染为 2D 图像，并添加到 HTML 页面。

4. 创建立方体

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

BoxGeometry 创建一个立方体。
MeshBasicMaterial 定义了物体的外观（颜色、纹理等）。
Mesh 是一个三维物体，由几何体和材质组成。

5. 渲染循环

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

requestAnimationFrame 用于循环执行动画，每帧更新立方体的旋转角度。

三、运行效果

运行代码后，你会看到一个旋转的绿色立方体，它会持续在屏幕上旋转，直到你关闭页面。

四、常见问题与解决方案

页面空白或错误
- 检查是否正确引入 Three.js 文件。
- 确保渲染器被正确挂载到 HTML。
模型显示为黑色
- 检查材质类型。如果需要灯光支持的效果，请使用 MeshStandardMaterial 或添加灯光。

响应式适配

为了适应窗口大小变化，可以监听 resize 事件：

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});