Three.js 入门：从零开始的第一个 3D 示例

一、Three.js 是什么

Three.js 是一个基于 WebGL 的 JavaScript 3D 库，它用简单的 API 把复杂的底层图形编程封装起来，让你在浏览器里用几十行代码就能渲染出 3D 场景（模型、光照、动画、VR 等）。

二、搭建运行环境

Three.js 最轻量的使用方式有两种，初学者推荐 CDN 引入，零安装、零构建：

方式 A：CDN（推荐入门） 直接在 HTML 里通过 <script type="module"> 从 https://unpkg.com 或 https://cdn.jsdelivr.net 引入 ESM 版本即可。

方式 B：本地 npm 安装（适合正式项目）

bash

npm install three
# 然后在项目中：import * as THREE from 'three'

三、最小示例讲解

一个 Three.js 场景通常由四个核心对象组成：

对象	作用	类比
Scene（场景）	放所有物体的"舞台"	摄影棚
Camera（相机）	决定从哪里看、看多宽	摄影师的镜头
Mesh（网格物体）	几何体 + 材质组合成的实体	舞台上的演员
Renderer（渲染器）	把场景画到 `<canvas>` 上	把画面输出到屏幕

流程：创建场景 → 放一个相机 → 加一个立方体 → 让渲染器逐帧绘制。

四、完整可运行示例

把下面的代码保存为 index.html，即可运行。

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>Three.js 入门 Demo</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
  <!-- 使用 importmap 指定 three 的 CDN 地址，便于 ESM import -->
  <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
      }
    }
  </script>

  <script type="module">
    import * as THREE from 'three';

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

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

    // 3. 创建渲染器并挂到页面上
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    document.body.appendChild(renderer.domElement);

    // 4. 创建一个立方体（几何体 + 材质 → 网格）
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshStandardMaterial({ color: 0x4caf50 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 5. 加一盏灯，让 MeshStandardMaterial 能显色
    const light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(2, 2, 3);
    scene.add(light);
    scene.add(new THREE.AmbientLight(0xffffff, 0.3));

    // 6. 动画循环：每一帧旋转一点 + 重新渲染
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();

    // 7. 自适应窗口大小
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  </script>
</body>
</html>

五、如何运行

方式 1（最简单）：由于使用了 type="module" + CDN，直接把 index.html 拖进 Chrome/Edge 浏览器即可看到一个缓慢旋转的绿色立方体；如果提示 CORS 错误，用方式 2。
方式 2（推荐）：在文件所在目录执行一条命令启动本地服务器，然后访问 http://localhost:8000：
bash
```
npx serve .
# 或者：python3 -m http.server 8000
```

看到旋转的立方体，说明你已经完成了 Three.js 的"Hello World"，接下来就可以继续探索**几何体、纹理贴图、相机控制（OrbitControls）、模型加载（GLTFLoader）**等进阶内容了。

Three.js 入门：从零开始的第一个 3D 示例 ​

一、Three.js 是什么 ​

二、搭建运行环境 ​

三、最小示例讲解 ​

四、完整可运行示例 ​