Three.js 快速入门教程【一】开启你的 3D Web 开发之旅

系列文章目录

Three.js 快速入门教程【一】开启你的 3D Web 开发之旅
 Three.js 快速入门教程【二】透视投影相机
 Three.js 快速入门教程【三】渲染器
 Three.js 快速入门教程【四】三维坐标系
 Three.js 快速入门教程【五】动画渲染循环
 Three.js 快速入门教程【六】相机控件 OrbitControls
Three.js 快速入门教程【七】常见几何体类型

文章目录

系列文章目录
[一、Three.js 是什么](#一、Three.js 是什么)
[二、Three.js 应用场景](#二、Three.js 应用场景)
三、环境搭建（两种方式任选）
四、核心概念
- [1. 场景（Scene）](#1. 场景（Scene）)
- [2. 相机（Camera）](#2. 相机（Camera）)
- 3.几何体（Geometry）
- 4、材质（Material）
- [5. 网格（Mesh）](#5. 网格（Mesh）)
- [6. 渲染器（Renderer）](#6. 渲染器（Renderer）)
五、牛刀小试
总结

一、Three.js 是什么

Three.js是一个基于WebGL封装的轻量级3D库，它将晦涩难懂的WebGL API封装成易读的JavaScript接口，让开发者无需深入了解 WebGL 的复杂细节，就能用简洁的代码创建出精美的 3D 场景。

二、Three.js 应用场景

1、数据可视化：将枯燥的报表变成旋转的3D图表

2、产品展示：让用户在网页中360°查看产品细节

3、3D网页游戏：开发轻量级的3D小游戏

4、建筑和室内设计：构建虚拟的建筑模型或室内设计方案，用户可以在浏览器中自由查看和导航这些 3D 场景，提前感受设计效果。

5、虚拟现实（VR）和增强现实（AR）：与 WebVR 和 WebXR API 集成，用于创建沉浸式的 VR 和 AR 应用，用户可以在浏览器中体验身临其境的虚拟环境或与现实环境叠加的增强现实效果。

三、环境搭建（两种方式任选）

方式一：CDN直连（适合测试或新手）

javascript 复制代码

!-- 在<head>中引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r162/three.min.js"></script></script>

方式二：npm安装（适合项目开发）

javascript 复制代码

npm install three

javascript 复制代码

// 使用时导入
import * as THREE from 'three';

四、核心概念

在Three.js中创建一个最基本的3D场景需要六个核心要素：场景（Scene）、相机（Camera）几何体（Geometry）、材质（Material）、网格（Mesh），最后通过渲染器（WebGLRenderer）将场景和相机的信息渲染到网页中，并通过动画循环实现持续更新，形成动态3D效果。

1. 场景（Scene）

作用：3D 世界的容器，所有物体、光源、相机的载体，所有要在屏幕上显示的元素都需要添加到场景中。

javascript 复制代码

// 创建一个场景
const scene = new THREE.Scene();
//通过scene.add(元素)添加元素

2. 相机（Camera）

作用：决定从哪个角度观察场景中的对象，就像现实世界中摄影师使用的相机一样

相机分为2种类型：透视相机、正交相机

透视相机：模拟人眼的视觉效果，远处的物体看起来比近处的物体小，具有透视效果。
正交相机：物体的大小不会随着距离的变化而改变，常用于 2D 游戏或 UI 设计。

3D开发场景中透视相机用的比较多，入门掌握透视相机即可。

透视相机（PerspectiveCamera）

javascript 复制代码

// 创建一个透视相机
const camera = new THREE.PerspectiveCamera(
  75, // 视场角（FOV）
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近裁剪面
  3000 // 远裁剪面
);

//设置相机位置
camera.position.set(100, 100, 100);

3.几何体（Geometry）

作用：定义了物体的形状，例如长方体、球体、圆柱体等。常用内置几何体：

BoxGeometry（长方体）

SphereGeometry（球体）

CylinderGeometry（圆柱体）

javascript 复制代码

// 创建一个立方体几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建一个球体
const geometry2 = new THREE.SphereGeometry(10);
//创建一个圆柱体
const geometry = new THREE.CylinderGeometry(10,10,50);

4、材质（Material）

作用：定义物体的外观（颜色、纹理、透明度等）。常用材质：

MeshBasicMaterial（基础材质，不受光影响，始终显示为指定的颜色或纹理。）

MeshPhongMaterial（高光材质，受光影响，面有高光反射效果。）

javascript 复制代码

// 创建一个基础材质
const material = new THREE.MeshBasicMaterial({ color: 0x000000 });

5. 网格（Mesh）

 几何体 + 材质 = 网格

网格是几何体和材质的组合，它将几何体的形状和材质的外观结合起来，形成一个完整的 3D 对象（物体）。创建网格后，需要将其添加到场景中才能显示。

javascript 复制代码

// 创建立方体（宽，高，深）
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 基础材质（可配置颜色、贴图等）
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建网格对象
const mesh= new THREE.Mesh(geometry, material);
scene.add(mesh);

6. 渲染器（Renderer）

渲染器负责将场景和相机的信息转化为屏幕上的图像。它使用 WebGL 或 Canvas 等技术在网页上绘制 3D 图形。Three.js 提供了多种渲染器，最常用的是 WebGL 渲染器（THREE.WebGLRenderer）。

javascript 复制代码

// 创建一个 WebGL 渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的 DOM 元素添加到页面中
document.body.appendChild(renderer.domElement);

五、牛刀小试

通过上面的介绍我们了解了three.js核心概念和基本的使用方式，下面用代码来演示一个简单的3d案例------实现一个正方体3D效果

代码示例：

javascript 复制代码

import * as THREE from "three";
//引入相机控制器
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

//创建场景
const scene = new THREE.Scene();
//设置黑色背景色
scene.background = new THREE.Color(0x000000);

//创建一个正方体
const geometry = new THREE.BoxGeometry(10, 10, 10);
//创建一个基础材质，颜色指定红色
const material = new THREE.MeshBasicMaterial({ color: "red" });

//创建一个网格对象
const mesh = new THREE.Mesh(geometry, material);
//设置网格对象位置
mesh.position.set(0, 0, 0);
//添加到场景中
scene.add(mesh);

//创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
//设置相机位置
camera.position.set(0, 10, 30);
//相机默认看向网格对象
camera.lookAt(mesh.position);

//创建渲染器
const renderer = new THREE.WebGLRenderer();
//设置渲染器尺寸为页面宽高
renderer.setSize(
  document.documentElement.clientWidth,
  document.documentElement.clientHeight
);
//将渲染器的 DOM 元素添加到页面中
document.body.appendChild(renderer.domElement);

// 新建一个相机控件
const controls = new OrbitControls(camera, renderer.domElement);
// 启用阻尼（惯性效果）
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// 动画循环
function animate() {
  // 定时刷新
  requestAnimationFrame(animate);
  // 更新控制器,必须调用以应用阻尼效果
  controls.update();
  //重新渲染
  renderer.render(scene, camera);
}
// 执行动画
animate();

运行效果：

说明：上述示例中我们引入了OrbitControls控制器，OrbitControls 是一个用于实现交互式场景相机控制的工具库。它允许用户通过鼠标（或触摸屏）直接操作 3D 场景的观察视角，如同在轨道上环绕目标物体一般，常用于提升 Web 3D 应用的交互体验。代码结尾通过requestAnimationFrame递归形式循环调用animate函数，达到页面持续刷新效果。在 Three.js 开发中，几乎所有的动态场景（如旋转模型、交互操作、自动动画）都需要通过 requestAnimationFrame 驱动持续渲染。

总结

通过本篇教程，我们认识了什么是Three.js和Three.js应用场景，共同探索了Three.js的核心概念与基础用法。从构建场景（Scene）、相机（Camera）到渲染器（Renderer）的"铁三角"架构，再到几何体（Geometry）、材质（Material）与网格（Mesh）的有机结合，至此你已经了解并掌握了创建最基础三维场景的核心工具链。

更多three.js入门知识点请关注该系列教程后续的更新。