开源项目：Three.js 构建 3D 世界的工具库

🎮 1、简述

随着 Web 技术的发展，浏览器早已不再只是"展示文本和图片"的工具。
Three.js 让我们能够：

👉 直接在浏览器中构建 3D 场景、动画和交互体验。

从数据可视化、数字孪生，到 Web 游戏和 3D 展示，Three.js 已成为 Web 3D 的事实标准。

2、什么是 Three.js？

Three.js 是一个基于 WebGL 的开源 JavaScript 3D 引擎，它对底层 WebGL API 进行了高度封装，使开发者可以用更直观的方式创建 3D 内容。

📌 核心理念：

让 3D 编程像写普通前端代码一样简单。

2.1 Three.js 能做什么？

🌍 3D 场景与动画
📊 三维数据可视化
🏗️ 数字孪生 / 工业可视化
🎮 Web 游戏
🧠 教学 / 科普交互

2.2 核心概念速览

在 Three.js 中，所有内容都围绕这 5 个核心对象展开：

概念	说明
Scene	场景（世界）
Camera	摄像机
Renderer	渲染器
Mesh	网格（几何体 + 材质）
Light	光源

📌 记住一句话：

Scene + Camera + Renderer = 可见的 3D 世界

3、安装 Three.js

方式一：使用 NPM（推荐）

bash 复制代码

npm install three

在项目中使用：

js 复制代码

import * as THREE from 'three';

方式二：使用 CDN（快速体验）

html 复制代码

<script src="https://unpkg.com/three@latest/build/three.min.js"></script>

适合 Demo / 教学场景。

4、基础引用

1️⃣ 基础 HTML

html 复制代码

<body>
  <script type="module" src="main.js"></script>
</body>

或者引用线上的Three.js模块库

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>Three.js Demo</title>
  <style>
    body { margin: 0; overflow: hidden; }
  </style>
</head>
<body>
<script type="module">
  import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';

  // 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);

  // 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();
</script>
</body>
</html>

2️⃣ main.js

js 复制代码

import * as THREE from 'three';

// 场景
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();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

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

animate();

🎉 打开浏览器即可看到一个旋转的 3D 立方体。

5、实践样例

5.1 添加光源与真实材质

使用标准材质（受光影响）

js 复制代码

const material = new THREE.MeshStandardMaterial({
  color: 0x2194ce,
  roughness: 0.4,
  metalness: 0.6
});

添加光源

js 复制代码

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

📌 效果：

立方体出现真实的光照与阴影感。

5.2 加载 3D 模型（GLTF）

安装 Loader

js 复制代码

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

加载模型

js 复制代码

const loader = new GLTFLoader();

loader.load('/model/scene.gltf', (gltf) => {
  scene.add(gltf.scene);
});

📌 GLTF 是 Three.js 最推荐的模型格式。

5.3 添加控制器（OrbitControls）

让用户可以拖拽、缩放场景。

js 复制代码

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

在动画中更新：

js 复制代码

controls.update();

📌 这是 90% Three.js 项目的标配组件。

6、应用场景

1️⃣ 数据可视化

3D 地图
网络拓扑
时空数据展示

2️⃣ 数字孪生

工厂 / 设备 3D 建模
实时数据绑定
状态可视化

3️⃣ Web 交互展示

产品 3D 展示
房屋 / 装修预览
教育演示

7、总结

Three.js 让 Web 拥有了"第三维"。

👉 如果你会前端，就能写 3D

👉 如果你会 3D，就能上 Web

无论是数据可视化、数字孪生，还是创意交互，Three.js 都是最值得投入的 Web 3D 技术栈。

方案	适用场景
Three.js	Web 3D 通用首选
Babylon.js	偏游戏
Unity WebGL	重型
Cesium	地理信息