Three.js 入门教程：从零开始渲染第一个 3D 立方体

作者：小圆点时间：2026-10-30 20:00:22浏览：256

本文详细介绍如何使用 Three.js 库在 Web 浏览器中渲染第一个 3D 图形。内容涵盖场景（Scene）、相机（Camera）、几何体（Geometry）及渲染器（Renderer）的核心概念与配置方法，并提供完整的代码示例，帮助开发者快速上手基于 WebGL 的 3D 开发。

Three.js 是什么？

Three.js 是一个专为在 Web 浏览器中创建和展示交互式 3D 图形而设计的 JavaScript 库。它极大地简化了基于 WebGL 的 3D 图形开发流程。WebGL 是一种允许在浏览器中实现硬件加速 3D 渲染的技术标准。Three.js 通过封装底层的 WebGL API，提供了更简洁易用的接口，使开发者能够轻松地在浏览器环境中构建 3D 场景、加载模型、制作动画以及实现交互效果。

渲染一个 3D 图形需要哪些步骤？

要渲染出第一个 3D 图形，通常需要执行以下核心步骤：

创建场景（scene），通过实例化 THREE.Scene 来实现。
创建相机（camera），通常使用 THREE.PerspectiveCamera 来定义视角。
创建渲染对象（以立方体为例），并将其添加到场景中。
实例化渲染器 renderer，利用 THREE.WebGLRenderer 构造函数完成创建。随后执行 render 方法，把场景 scene 与相机 camera 传入参数以执行渲染操作。

// 插入一个跳转地址，方便查看完整代码

创建场景

在 Three.js 中，使用 THREE.Scene 来创建场景（scene）。场景是所有 3D 对象、光源和相机的容器，它是构建和组织整个 3D 世界的基础框架。

THREE.Scene 类代表了一个虚拟的 3D 空间，其中可以容纳几何体、模型、灯光等各种对象。通过将对象添加到场景中，渲染器可以在绘制过程中将它们呈现到屏幕上。

创建一个简单的场景：

import * as THREE from 'three';
const scene = new THREE.Scene();

实例化后的 scene 对象提供了一系列 API 来管理其中的 3D 对象，如： scene.add(object: Object3D) 、scene.remove(object: Object3D) , scene.traverse(callback: Function) 。本文暂时未涉及 scene 的其他 API，后续将单独撰写文章进行详细介绍。

创建相机

在 Three.js 中，camera（相机）用于定义场景中的视角和观察位置。相机决定了渲染器如何将场景中的 3D 对象投影到屏幕上，从而确定观察者所看到的内容。通过调整相机，可以控制观察者在场景中的位置和视角。在 OpenGL 中，相机位置通常固定在 (0,0,0)，所有的相机移动实际上是对场景中所有对象进行矩阵变换。Three.js 提供了多种类型的相机，最常用的是透视相机（THREE.PerspectiveCamera）和正交相机（THREE.OrthographicCamera）。

透视相机（THREE.PerspectiveCamera）采用透视投影，模拟人眼的视觉效果。它具备视场角（FOV）、纵横比、近剪裁面和远剪裁面等属性。视场角决定了相机前方可见场景的范围，纵横比定义了视图的宽高比例，而近、远剪裁面则界定了相机可见距离的边界。
正交相机（THREE.OrthographicCamera）采用正交投影，产生无透视效果的平行投影。它具备左、右、上、下、近、远等属性，用于定义可见区域的具体范围。

本文使用透视相机创建一个实例：

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

参数主要如下，THREE.PerspectiveCamera(fov, aspect, near, far)

fov: 视场角，表示相机的视角张度，单位是度。
aspect: 纵横比，表示渲染区域的宽高比。
near：近剪裁面的距离，表示相机能够看到的最近距离，在近剪裁面之前的 3D 对象会被裁剪掉。
far：远剪裁面，表示相机能够看到的最远距离。在此之后的对象也会被裁剪掉。

不用担心，后续会专门写篇文章进行详细介绍两相机之间的区别，什么是近剪裁面、远剪裁面以及其距离怎么算的。

创建渲染对象（立方体为）

创建一个正立方体：

// 创建绿色的立方体
// 创建立方体几何体
const geometry = new THREE.BoxGeometry(1,1,1);
// 实例化基础的材质，颜色设置为绿色， rgb 每两个十六进制单位分别表示一个基础元色。
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 生成一个立方体网格对象，传入几何体对象和颜色材质对象
const cube = new THREE.Mesh(geometry, material);
// 将立方体网格对象添加到场景中
scene.add(cube);

这里涉及到三个新的基类分别是 THREE.BoxGeometry 、 THREE.MeshBasicMaterial 、 THREE.Mesh

THREE.BoxGeometry 立方几何体，用于创建长方体或者立方体。ThreeJS 提供 8 种 Shape 类用于创建基本几何体和自定义形状。还提供一些可以扩展的基类，我们可以在这个基类的基础上进行其他封装。openGL 提供的图元实际很基础（点，线，线环，线带，三角形，三角扇，三角带，四边形），ThreeJS 进行的大量封装使得我们更好进行形状生成。（^_^）以后再开篇进行详细介绍。
MeshBasicMaterial 基础材质，不受光照影响，只显示颜色。ThreeJS 一共提供了 7 种常用材质对象以及特殊的几种材质比如：粒子材质等。
Mesh 网格对象，用于将几何体与材质结合起来。ThreeJS 提供 6 种网格对象支持不同的使用场景。

创建渲染器将 scene 渲染出来

创建一个 WebGLRenderer 渲染器渲染scene：

// 创建一个 webgl 渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的 size
renderer.setSize(window.innerWidth, window.innerHeight);
// 绑定输出位置
document.body.appendChild(renderer.domElement);
// 将 scene 渲染出来
renderer.render(scene, camera);

渲染器是 ThreeJS 的核心组件，负责将 scene 场景中的三维对象渲染到屏幕上。ThreeJS 提供了三类常用的渲染器 WebGLRenderer 、 CanvasRenderer、SVGRenderer。预计未来可能会支持 WebGPURenderer 现在 Chrome 已经支持 WebGPU 了并且性能比 Webgl 更好一些（反正隔壁 babyIcon 已经支持了^v^）。渲染器主要行为大体如下:

创建渲染上下文
设置渲染参数
渲染 scene
输出渲染结果到载体（通常都是canvas）

至此已经能渲染一个立方体了，接下来补充一丢丢代码让立方体渲染起来。

const rotateBox = () => {
    // 创建 scene 场景
    const scene = new THREE.Scene();
    // 创建相机
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    // 设置相机的z位置为5 ，位置：（0，0，5)
    camera.position.z = 5;
    // 创建绿色立方体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ffa1 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    // 让立方体渲染起来
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
  };

完整代码（我在 react 中运行），方便对每篇文章的 demo 进行管理以及ui交互。代码也可以复制到到 HTML 中执行额外添加一行 threejs库的引入即可：

import React, { useEffect } from 'react';
import * as THREE from 'three';
export default function OneDay() {
  const rotateBox = () => {
    // 创建 scene 场景
    const scene = new THREE.Scene();
    // 创建相机
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    // 设置相机的z位置为5 ，位置：（0，0，5)
    camera.position.z = 5;
    // 创建绿色立方体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ffa1 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    // 让立方体渲染起来
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
  };
  useEffect(() => {
    rotateBox();
  }, []);
  return <div id="container"></div>
}

以上就是ThreeJS 入门如何渲染出第一个3D图形的详细内容，更多关于ThreeJS渲染3D图形的资料请关注本站其它相关文章！

作者最新文章

JS在setTimeout或Ajax回调中打开新标签页失败怎么处理

2026-11-05 15:50:12

JS直播协议选型：HLS、FLV与WebRTC的延迟与兼容性对比

2026-11-05 12:16:14

JS实现回到顶部：scrollTop赋值与浏览器兼容性处理

2026-11-04 23:43:35

JS使用classList动态添加、移除和切换CSS类名

2026-11-04 23:40:58

在 D3.js 中实现平滑过渡动画的技巧

2026-11-03 23:46:09