Error: Object not instance of THREE.Object3D

Question

I want to add an fbx model which I have downloaded from adobe mixamo. But when I tried to run the code it just shows this blank screen with this console error. I am sharing my code below:

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); // soft white light
scene.add(alight);

const fbxloader = new FBXLoader();
let man = new THREE.Object3D();
fbxloader.load('TheBoss.fbx', function (fbx) {
    man = fbx.scene
    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();

I was trying to load a fbx model to my three.js scene. I was expecting a model on my scene.

Answer 1

The issue here appears to be in usage of the FBXLoader.

Looking at the code, FBXLoader.load returns a Group that does not have a scene property, which caused the error:

fbxloader.load(
    'TheBoss.fbx',
    // onload:
    function ( fbx ) {
        man = fbx.scene // error occurred here
        scene.add( man );
    },
...
);

Instead, simply add the returned Group directly to the scene.

fbxloader.load(
    'TheBoss.fbx',
    // onload:
    function ( fbxGroup ) {
        scene.add( fbxGroup );
    },
...
);