Three.js

介绍

Three.js 是一个基于 WebGL 的 3D 图形渲染库，能够帮助你在 Web 环境中创建和渲染复杂的 3D 图形、场景和动画。它封装了底层的 WebGL API，使得 3D 渲染更加简单易用，广泛应用于游戏、虚拟现实、可视化等领域。

安装 Three.js

npmcdn

bash

npm i three
npm i -D @types/three

html

<!-- jsdelivr -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

基本概念

Three.js 中的核心概念：

场景（Scene）：所有 3D 对象的容器，包括物体、光源、相机等。
相机（Camera）：视角的设置，决定你从哪个角度看场景。
物体（Object3D）：包括几何体（geometry）、材质（material）和变换（translation, rotation, scale）。
光源（Light）：提供光照效果，决定物体的显示效果。
渲染器（Renderer）：负责将场景渲染到屏幕上。

创建一个基本场景

一个简单的 Three.js 程序通常包括以下几个步骤：

创建场景。
创建相机。
创建一个渲染器。
创建物体（几何体、材质）。
设置光源。
渲染场景。

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js 入门</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
      // 1. 创建场景
      const scene = new THREE.Scene()

      // 2. 创建相机
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

      // 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. 创建光源
      const light = new THREE.AmbientLight(0x404040) // 环境光
      scene.add(light)

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

      // 6. 渲染场景
      function animate() {
        requestAnimationFrame(animate)

        // 动画：让立方体旋转
        cube.rotation.x += 0.01
        cube.rotation.y += 0.01

        // 渲染场景
        renderer.render(scene, camera)
      }

      animate()
    </script>
  </body>
</html>

核心对象

场景 (Scene)：用于添加、管理和渲染场景中的所有对象。
js
```
const scene = new THREE.Scene()
```
相机 (Camera)： PerspectiveCamera 是最常用的相机类型，它模拟人眼视角。它的构造函数参数分别是：视野角度（FOV），宽高比，近剪裁面和远剪裁面。
js
```
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
```

渲染器 (Renderer)：渲染器负责将场景绘制到屏幕上。我们使用 WebGLRenderer 来进行渲染。

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

几何体 (Geometry)： Three.js 提供了多种几何体（如立方体、球体、平面等），这些几何体可以通过 THREE.BoxGeometry、THREE.SphereGeometry 等创建。
js
```
const geometry = new THREE.BoxGeometry()
```
材质 (Material)：每个物体都需要有材质，常见的材质包括 MeshBasicMaterial、MeshLambertMaterial、MeshPhongMaterial 等。
js
```
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
```
物体 (Mesh)： Mesh 是几何体和材质的组合体，物体可以被添加到场景中。
js
```
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)
```

动画

在 Three.js 中，动画通常是通过更新物体的位置、旋转、缩放等属性来实现的。使用 requestAnimationFrame 进行递归渲染。

function animate() {
  requestAnimationFrame(animate)

  // 动画：让立方体旋转
  cube.rotation.x += 0.01
  cube.rotation.y += 0.01

  renderer.render(scene, camera)
}

animate()

响应窗口大小变化

为了使渲染器适应浏览器窗口的大小变化，你可以监听 resize 事件并更新相机和渲染器的大小。

window.addEventListener('resize', () => {
  renderer.setSize(window.innerWidth, window.innerHeight)
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
})

加载外部模型

Three.js 支持多种格式的 3D 模型加载，如 GLTF、OBJ、FBX 等。通过加载器可以轻松加载外部模型。

const loader = new THREE.GLTFLoader()
loader.load('path/to/model.gltf', function (gltf) {
  scene.add(gltf.scene)
})

常用的灯光

AmbientLight：环境光，不产生阴影。
DirectionalLight：平行光，模拟太阳光。
PointLight：点光源，光线从一点向各个方向辐射。
SpotLight：聚光灯，光线从一个点发射并具有聚焦效果。

const light = new THREE.AmbientLight(0x404040)
scene.add(light)

Three.js ​

介绍 ​

安装 Three.js ​

基本概念 ​

创建一个基本场景 ​

核心对象 ​

动画 ​

响应窗口大小变化 ​

加载外部模型 ​

常用的灯光 ​