Three.js加载Mixamo FBX模型报错：Object not instance of THREE.Object3D

问题原因 #

你的代码存在关键错误：在FBX加载完成的回调函数中，你试图访问fbx.scene，但Three.js的FBXLoader加载成功后返回的对象本身就是THREE.Object3D的实例，不存在额外的scene属性。这导致你把undefined赋值给man，执行scene.add(man)时触发类型错误。

修复后的代码 #

将回调里的man = fbx.scene改为man = fbx即可，也可直接把加载好的模型添加到场景：

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

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);

const alight = new THREE.AmbientLight(0x404040, 10);
scene.add(alight);
// 可选：添加方向光增强模型显示效果
const dirLight = new THREE.DirectionalLight(0xffffff, 5);
dirLight.position.set(5, 5, 5);
scene.add(dirLight);

const fbxloader = new FBXLoader();
let man = new THREE.Object3D();
fbxloader.load('TheBoss.fbx', function (fbx) {
    // 修复：直接使用fbx对象，而非fbx.scene
    man = fbx;
    // 可选：如果模型尺寸异常，调整缩放比例
    man.scale.set(0.1, 0.1, 0.1);
    scene.add(man);
},
    function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },  
    function (error) {
        console.error(error);
    });

camera.position.z = 5;
controls.update();

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}

animate();

额外排查建议 #

• 确认TheBoss.fbx文件路径正确，浏览器控制台无404错误
• 若模型加载后仍不可见，可调整相机位置（如camera.position.set(0, 2, 8)）或模型缩放比例
• 添加AxesHelper辅助查看场景坐标系，确认模型是否在可视范围内：scene.add(new THREE.AxesHelper(5));

内容的提问来源于stack exchange，提问作者Jeevan Jaison