VR的世界越来越美好！THREE.js让你轻松加载不同格式的模型及动画

前端

2023-10-24 19:54:29

Three.js：3D建模与动画的强大工具

Three.js 是一个基于 JavaScript 的库，用于创建和显示令人惊叹的 3D 图形。它广泛用于各种行业，包括电子商务、建筑、教育和游戏开发。

加载 3D 模型

Three.js 支持加载多种 3D 模型格式，包括：

FBX： 一种流行的格式，尤其是在游戏和动画行业中，它支持加载模型和动画。

OBJ： 一种简单的格式，仅包含模型几何，但不包含纹理信息。

GLTF： 一种新的格式，将模型、纹理和动画信息打包在一个文件中，使加载过程更加高效。

加载 FBX 模型：

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';

const loader = new FBXLoader();
loader.load('model.fbx', (object) => {
  scene.add(object);
});

加载 OBJ 模型：

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';

const loader = new OBJLoader();
loader.load('model.obj', (object) => {
  scene.add(object);
});

loader.load('model.mtl', (materials) => {
  object.traverse((child) => {
    if (child.isMesh) {
      child.material = materials.find((material) => material.name === child.material.name);
    }
  });
});

加载 GLTF 模型：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

const loader = new GLTFLoader();
loader.load('model.gltf', (gltf) => {
  scene.add(gltf.scene);
});

加载动画

Three.js 不仅可以加载静态模型，还可以加载动画，让您的模型栩栩如生。

加载动画：

loader.load('animation.fbx', (animation) => {
  model.animations.push(animation);

  const mixer = new THREE.AnimationMixer(model);
  const action = mixer.clipAction(animation);
  action.play();
});