书洞笔记

外观

Threejs 模型加载

约 1604 字大约 5 分钟

2025-03-28

模型类型

  • 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 格式模型的加载器。

//导入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()： 加载模型的方法。

  • 第一个参数： 模型的路径。

  • 第二个参数： 加载成功后的回调函数，参数为加载的模型对象。

  • 第三个参数： 加载过程中的回调函数，参数为加载进度。

  • 第四个参数： 加载失败的回调函数，参数为错误信息。

gltf

OBJLoader

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

//导入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()： 遍历模型对象的所有子对象。

obj

FBXLoader

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

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

ColladaLoader

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

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

STLLoader

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

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

PLYLoader

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

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

VRMLLoader

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

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

TDSLoader

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

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

JSONLoader

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

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

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

模型对象

gltf 模型对象

gltfObj

  • scene： 模型场景，包含模型的所有子对象。

  • scenes： 模型场景数组，包含模型的所有场景。

  • animations： 模型动画，包含模型的所有动画。

  • asset： 模型资源，包含模型的元数据。

  • parser： 模型解析器，用于解析模型文件。

  • camera： 模型相机，用于渲染模型。

  • userData： 模型用户数据，用于存储用户自定义数据。

obj 模型对象

ObjObj

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

位置操作

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

以 Obj 模型为例，加载成功后可以看到模型对象中有一个 children 属性，这个属性是一个数组，里面包含了模型的所有子对象。每个子对象都是一个 Mesh 对象，Mesh 对象是 Three.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);
});

models-opr

材质操作

//获取模型对象
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);
});

models-material

动画操作

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(模型对象)： 动画混合器是用于场景中特定对象的动画的播放器。

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

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

  • fadeIn(时间)： 动画淡入时间。

  • fadeOut(时间)： 动画淡出时间。

  • play()： 播放动画。

  • stop()： 停止动画。

  • reset()： 重置动画。

  • setLoop(循环方式)： 设置动画循环方式。

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

play()： 播放动画。

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

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

models-animation