Three.js 核心功能：解锁3D图形的无限潜力

---

前言

Three.js 是一个强大且灵活的 JavaScript 库，旨在简化 WebGL 的使用，使开发者能够轻松创建和操作复杂的3D图形。其核心功能涵盖了从加载模型、动画制作到物理模拟等多个方面，为构建引人入胜的交互式3D体验提供了坚实的基础。本文将深入探讨 Three.js 的核心功能，帮助你更好地理解和利用这个工具。

---

一、加载模型

在现代3D应用中，外部模型文件的加载是不可或缺的一部分。Three.js 提供了多种加载器，支持常见的3D文件格式，如 .obj, .gltf, .fbx 等。通过这些加载器，你可以快速导入由专业3D建模软件（如 Blender, Maya）创建的复杂模型。

• 使用GLTFLoader加载GLTF模型：

  // 引入 GLTFLoader
  import {
        GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
  
  // 创建 GLTF 加载器实例
  const loader = new GLTFLoader();
  
  // 加载模型并添加到场景中
  loader.load(
    // 模型路径
    'models/gltf/Duck/glTF/Duck.gltf',
    // 成功回调
    function (gltf) {
       
      scene.add(gltf.scene);
    },
    // 进度回调
    undefined,
    // 错误回调
    function (error) {
       
      console.error(error);
    }
  );
  

• 优点：支持广泛的文件格式，简化了模型集成过程；异步加载确保不会阻塞主线程。

二、动画

动画是让场景生动起来的关键。Three.js 提供了两种主要方式来实现动画效果：基于时间的更新和关键帧动画。

• 基于时间的更新：使用 requestAnimationFrame 或者 Three.js 内置的 animate 函数，可以平滑地更新物体的位置、旋转或缩放等属性。

  // 定义一个简单的立方体
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshStandardMaterial({
        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();
  

• 关键帧动画：对于更复杂的动画序列，Three.js 支持基于 JSON 的关键帧数据，并可通过 THREE.AnimationMixer 来播放这些动画。