Three.js 基础与实践

王新焱

已于 2025-05-07 11:22:33 修改

阅读量917

点赞数 16

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript three.js

于 2025-05-06 17:35:15 首次发布

本文链接：https://blog.csdn.net/qq_34402069/article/details/147732203

一、技术背景介绍

随着 Web 技术的发展，尤其是 HTML5 的兴起，WebGL（Web Graphics Library）作为一种在浏览器中渲染高性能 3D 图形的 API 被引入。但 WebGL 接口底层、复杂、学习曲线陡峭，不适合大多数前端开发者直接使用。

Three.js 于 2010 年由 Ricardo Cabello 发起开发，旨在封装 WebGL 接口，简化 3D 渲染流程，使开发者能够通过更友好的 API 创建复杂的 3D 场景、动画和交互效果。

二、Three 工作原理

Three.js 的工作原理主要是对 WebGL 的封装，使开发者可以通过更简单的方式构建并渲染 3D 场景。它的核心流程可以概括为构建场景 → 设置相机 → 渲染输出，本质上是利用 WebGL API 在 <canvas> 元素上进行图形绘制。

Three.js 的核心组件

Three.js 的工作原理基于几个核心组件：场景（Scene）、相机（Camera）、渲染器（Renderer）、几何体（Geometry）、材质（Material）、光源（Light）和网格（Mesh）。这些组件协同工作，共同完成 3D 场景的创建和渲染。

①.场景 (Scene)

场景是 3D 空间的容器，用于存储所有需要渲染的对象，例如几何体、灯光、相机等。场景是一个树形结构，可以包含多个子对象，这些子对象可以是网格、灯光或其他场景节点。

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

scene.background = new THREE.Color(0x000000) // 设置黑色背景

②.相机（Camera）

相机定义了用户观察场景的视角。Three.js 提供了多种类型的相机，最常用的是 PerspectiveCamera（透视相机）和 OrthographicCamera（正交相机）。透视相机模拟了人眼的透视效果，而正交相机则提供了一种平行投影的效果。

const camera = new THREE.PerspectiveCamera(
    75, // 视野角度
    window.innerWidth / window.innerHeight, // 宽高比
    0.1, // 近裁剪面
    1000 // 远裁剪面
)

camera.position.z = 5 // 设置相机的位置

③.渲染器（Renderer）

渲染器负责将场景和相机的内容绘制到屏幕上。Three.js 使用 WebGL 渲染器（WebGLRenderer），它基于 WebGL API，能够在浏览器中高效地渲染 3D 图形。

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

④.几何体（Geometry）

几何体定义了物体的形状。Three.js 提供了许多预定义的几何体，例如立方体（BoxGeometry）、球体（SphereGeometry）、平面（PlaneGeometry）等。

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

// 创建球体几何体 / 参数分别为球体半径、宽度分段数、高度分段数
const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32) 

// 创建一个平面几何体
const planeGeometry = new THREE.PlaneGeometry(2, 2) // 参数分别为平面的宽度和高度

⑤.材质（Material）

材质定义了物体的外观，例如颜色、纹理、反射率等。Three.js 提供了多种材质，例如 MeshBasicMaterial（基础材质）、MeshLambertMaterial（兰伯特材质）、MeshPhongMaterial（菲涅尔材质）等。

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }) // 创建一个绿色的材质

⑥.网格（Mesh）

网格是几何体和材质的组合，它是我们实际添加到场景中的对象。每个网格都有一个几何体和一个材质。

const cube = new THREE.Mesh(geometry, material) // 创建一个网格
scene.add(cube) // 将网格添加到场景中

⑦.光源（Light）

用于为场景中的物体提供光照效果。光源可以模拟现实世界中的各种光照情况，例如太阳光、灯光、环境光等。光源的使用可以显著增强场景的真实感和视觉效果。

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5) // 白色环境光，强度为 0.5
scene.add(ambientLight)

示例代码

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

// 2. 创建相机
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
camera.position.set(0, 0, 5)

// 3. 创建渲染器并添加到 DOM
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// 4. 添加物体
const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

// 5. 添加光源
const light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(0, 1, 1)
scene.add(light)

// 6. 渲染循环
function animate() {
  requestAnimationFrame(animate)
  cube.rotation.y += 0.01
  renderer.render(scene, camera)
}
animate()

三、Three安装和使用

1.通过 CDN 引入
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>        

<script>
   // 你的 Three.js 代码将在这里编写
</script>


2.npm安装包安装
npm install three

// 例如：main.js 或你的组件中
import * as THREE from 'three'

// 示例：创建一个立方体
const scene = new THREE.Scene()
const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)