如何在Three.js中使用FBX模型：添加纹理与验证动画

一、给FBX模型添加纹理 #

你下载的maps文件夹中的PNG是模型的纹理资源（如颜色、法线、粗糙度等），需要将它们绑定到模型的材质上。以下是修改后的完整代码，包含纹理加载逻辑：

import * as THREE from '../three/build/three.module.js';
import { FBXLoader } from '../three/examples/jsm/loaders/FBXLoader.js';
import { OrbitControls } from '../three/examples/jsm/controls/OrbitControls.js';

window.onload = function init() {
  const canvas = document.getElementById("gl-canvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;

  const renderer = new THREE.WebGLRenderer({ canvas });
  renderer.setSize(canvas.width, canvas.height);
  renderer.outputEncoding = THREE.sRGBEncoding; // 让纹理颜色显示更准确

  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xffffff);

  const camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000);
  const controls = new OrbitControls(camera, renderer.domElement); // 修正原代码拼写错误

  // 添加环境光，提升模型光照均匀度
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambientLight);

  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(1, 1, 1).normalize();
  scene.add(directionalLight);

  camera.position.z = 5;
  camera.position.y = 5;
  camera.rotation.x = THREE.MathUtils.degToRad(-30);

  let mixer = null;
  const clock = new THREE.Clock();

  const loader = new FBXLoader();
  const textureLoader = new THREE.TextureLoader();

  loader.load('../assets/Hoonicorn.fbx', function (object) {
    scene.add(object);
    object.scale.set(0.1, 0.1, 0.1);

    // 遍历模型所有网格，绑定纹理
    object.traverse(function(child) {
      if (child.isMesh) {
        // 替换为你实际的贴图文件名，注意路径正确
        // 基础颜色贴图
        const albedoTex = textureLoader.load('../assets/maps/Hoonicorn_albedo.png');
        albedoTex.encoding = THREE.sRGBEncoding;
        child.material.map = albedoTex;

        // 法线贴图（增强模型细节）
        const normalTex = textureLoader.load('../assets/maps/Hoonicorn_normal.png');
        child.material.normalMap = normalTex;
        child.material.normalScale.set(1, 1);

        // 粗糙度贴图（控制表面光滑度）
        const roughnessTex = textureLoader.load('../assets/maps/Hoonicorn_roughness.png');
        child.material.roughnessMap = roughnessTex;

        // 金属度贴图（控制金属质感）
        const metalnessTex = textureLoader.load('../assets/maps/Hoonicorn_metalness.png');
        child.material.metalnessMap = metalnessTex;

        // 启用PBR材质工作流参数
        child.material.metalness = 1;
        child.material.roughness = 1;

        // 通知Three.js材质已更新
        child.material.needsUpdate = true;
      }
    });

    // 处理动画
    if (object.animations.length > 0) {
      mixer = new THREE.AnimationMixer(object);
      const action = mixer.clipAction(object.animations[0]);
      action.play();
    }

    // 统一动画循环
    function animate() {
      requestAnimationFrame(animate);
      const delta = clock.getDelta();
      if (mixer) mixer.update(delta);
      renderer.render(scene, camera);
    }
    animate();
  });
}

注意事项： #

• 贴图文件名需与maps文件夹中的实际文件一致（比如有的模型用diffuse.png而非albedo.png，需对应修改）
• 开启sRGBEncoding是为了让颜色贴图的显示效果与设计稿一致
• 原代码中contorls拼写错误已修正为controls

二、验证FBX模型是否包含动画 #

方法1：Three.js极简检测脚本 #

无需渲染场景，仅加载模型并打印动画信息：

import * as THREE from '../three/build/three.module.js';
import { FBXLoader } from '../three/examples/jsm/loaders/FBXLoader.js';

const loader = new FBXLoader();
// 替换为待检测的FBX文件路径
loader.load('../assets/your-model.fbx', (object) => {
  console.log(`模型动画总数：${object.animations.length}`);
  if (object.animations.length > 0) {
    console.log('动画名称列表：');
    object.animations.forEach((anim, index) => {
      console.log(`${index+1}. ${anim.name}`);
    });
  } else {
    console.log('该模型无动画数据');
  }
}, undefined, (error) => {
  console.error('加载出错：', error);
});

运行后打开浏览器控制台，即可查看动画信息。

方法2：轻量FBX查看工具 #

使用无需安装的本地或轻量FBX查看工具（避开复杂的Blender），打开模型后通常会直接显示是否有动画播放选项，或能查看动画轨道，操作直观简单。

内容的提问来源于stack exchange，提问作者binary_right_010.011