模型苏醒计划：Threejs 让静态模型「叛逆」起来

模型类型

GLTF(.gltf,.glb)： 是由 Khronos Group 开发的一种新型 3D 文件格式，具有高效、紧凑、支持 PBR 材质等优点，是当前主流的 3D 模型格式。
FBX(.fbx)： 是由 Autodesk 开发的一种 3D 模型格式，支持几何体、材质、骨骼动画等丰富信息，但文件较大，加载速度较慢，常用于 3D 内容制作和动画。
OBJ(.obj)： 是由 Wavefront Technologies 开发的一种 3D 模型格式，文件较小，但缺少动画和材质信息。
Collada(.dae)： 是由 Khronos Group 开发的一种 3D 模型格式，支持几何体、材质、动画等多种信息，但文件较大，加载速度较慢。
STL(.stl)： 是由 3D Systems 开发的一种 3D 模型格式，主要用于 3D 打印，文件较小，但缺少动画和材质信息。
PLY(.ply)： 是一种用于存储 3D 扫描数据的文件格式，支持几何体和材质信息，但文件较大，加载速度较慢。
3DS(.3ds)： 是由 Autodesk 开发的一种 3D 模型格式，支持几何体、材质和简单动画。
VRML(.wrl)： 是一种早期的 3D 模型格式，支持几何体、材质和简单动画。
JSON(.json)： 是一种轻量级的数据交换格式，可以用于存储 3D 模型信息，支持几何体、材质、动画等信息，但需要自己解析和处理。

加载器

GLTFLoader

是 Three.js 提供的一个用于加载 GLTF 格式模型的加载器。

js 复制代码

//导入GLTFLoader
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

//创建GLTFLoader实例
const gltfLoader = new GLTFLoader();

//加载模型
gltfLoader.load(
  "./models/scene.gltf",
  (gltf) => {
    scene.add(gltf.scene);
  },
  (xhr) => {
    console.log(xhr);
    let progress = (xhr.loaded / xhr.total) * 100;
    processDom.innerText = `加载进度：${progress.toFixed(2)}%`;
  },
  (err) => {
    console.log(err);
  }
);

gltfLoader.load()： 加载模型的方法。

第一个参数： 模型的路径。
第二个参数： 加载成功后的回调函数，参数为加载的模型对象。
第三个参数： 加载过程中的回调函数，参数为加载进度。
第四个参数： 加载失败的回调函数，参数为错误信息。

OBJLoader

是 Three.js 提供的一个用于加载 OBJ 格式模型的加载器。

js 复制代码

//导入OBJLoader
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";

//创建OBJLoader实例
const objLoader = new OBJLoader();

//加载模型
objLoader.load("./models/scene.obj", (obj) => {
  scene.add(obj);
  //添加贴图
  obj.traverse((child) => {
    if (child.isMesh) {
      child.material.map = new THREE.TextureLoader().load("./models/nezha.png");
    }
  });
});

objLoader.load()： 加载模型的方法。

第一个参数： 模型的路径。
第二个参数： 加载成功后的回调函数，参数为加载的模型对象。
第三个参数： 加载过程中的回调函数，参数为加载进度。
第四个参数： 加载失败的回调函数，参数为错误信息。

obj.traverse()： 遍历模型对象的所有子对象。

FBXLoader

是 Three.js 提供的一个用于加载 FBX 格式模型的加载器。

js 复制代码

//导入FBXLoader
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";

ColladaLoader

是 Three.js 提供的一个用于加载 Collada 格式模型的加载器。

js 复制代码

//导入ColladaLoader
import { ColladaLoader } from "three/examples/jsm/loaders/ColladaLoader.js";

STLLoader

是 Three.js 提供的一个用于加载 STL 格式模型的加载器。

js 复制代码

//导入STLLoader
import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";

PLYLoader

是 Three.js 提供的一个用于加载 PLY 格式模型的加载器。

js 复制代码

//导入PLYLoader
import { PLYLoader } from "three/examples/jsm/loaders/PLYLoader.js";

VRMLLoader

是 Three.js 提供的一个用于加载 VRML 格式模型的加载器。

js 复制代码

//导入VRMLLoader
import { VRMLLoader } from "three/examples/jsm/loaders/VRMLLoader.js";

TDSLoader

是 Three.js 提供的一个用于加载 3DS 格式模型的加载器。

js 复制代码

//导入TDSLoader
import { TDSLoader } from "three/examples/jsm/loaders/TDSLoader.js";

JSONLoader

是 Three.js 提供的一个用于加载 JSON 格式模型的加载器。

js 复制代码

//导入JSONLoader
import { JSONLoader } from "three/examples/jsm/loaders/JSONLoader.js";

注意： 以上加载器的使用方法基本相同，只是加载的模型格式不同。另外加载模型的时候可能需要添加光源，不然加载的模型是黑的。

模型对象

gltf 模型对象

scene： 模型场景，包含模型的所有子对象。
scenes： 模型场景数组，包含模型的所有场景。
animations： 模型动画，包含模型的所有动画。
asset： 模型资源，包含模型的元数据。
parser： 模型解析器，用于解析模型文件。
camera： 模型相机，用于渲染模型。
userData： 模型用户数据，用于存储用户自定义数据。

obj 模型对象

children： 模型子对象数组，包含模型的所有子对象。

位置操作

不管从 gltf 对象 scene 中还是 obj 对象中可以看到很多熟悉的属性，比如 position、scale 等，这些属性都是 Three.js 中常用的属性。加载模型成功后就可以操作模型的这些属性了。

以 Obj 模型为例，加载成功后可以看到模型对象中有一个 children 属性，这个属性是一个数组，里面包含了模型的所有子对象。每个子对象都是一个 Mesh 对象，Mesh 对象是 Three.js 中用于渲染几何体的对象，它包含了几何体和材质两个属性。我们可以通过操作这些属性来改变模型的显示效果。

js 复制代码

//获取模型对象
objLoader.load("./models/scene.obj", (obj) => {
  //缩放
  obj.scale.set(0.5, 0.5, 0.5);
  //位移
  obj.position.set(0.5, 0, 0);
  // 旋转180度
  obj.rotation.y = Math.PI;
  scene.add(obj);
});

材质操作

js 复制代码

//获取模型对象
objLoader.load("./models/scene.obj", (obj) => {
  // 设置材质颜色
  obj.children[0].material.color.set(0xff0000); 
  // 设置材质纹理
  obj.children[0].material.map = new THREE.TextureLoader().load("./models/nezha.png");
  scene.add(obj);
});

动画操作

js 复制代码

let mixer; // 动画混合器
//获取模型对象
gltfLoader.load("./models/Soldier.glb", (gltf) => {
  //获取动画
  const animations = gltf.animations;
  //创建动画混合器
  mixer = new THREE.AnimationMixer(gltf.scene);
  //创建动画动作
  const action = mixer.clipAction(animations[1]);
  //播放动画
  action.play();
  scene.add(gltf.scene);
});

let clock = new THREE.Clock();
//更新动画
function animate() {
  requestAnimationFrame(animate);
  if (mixer) {
    mixer.update(clock.getDelta());
  }
  renderer.render(scene, camera);
}

1. 创建 AnimationMixer 实例，传入模型对象。

AnimationMixer(模型对象)： 动画混合器是用于场景中特定对象的动画的播放器。

2. 调用 clipAction() 方法创建动画动作，传入动画剪辑。

clipAction(动画剪辑)： 创建动画动作，用于播放动画。

fadeIn(时间)： 动画淡入时间。
fadeOut(时间)： 动画淡出时间。
play()： 播放动画。
stop()： 停止动画。
reset()： 重置动画。
setLoop(循环方式)： 设置动画循环方式。

3. 调用 play() 方法播放动画。

play()： 播放动画。

4. 在渲染循环中调用 update() 方法更新动画。

update(时间差)： 更新动画。

书洞笔记