Erro 404: Not Found while loading .fbx file in angular project

I am new to three.js and have problem with loading a .fbx file with fbxLoader. I get the error:
Error: fetch for "http://localhost:4200/sample.fbx" responded with 404: Not Found
Does any one know how to get it working?
Thank you in advance.

I am using: types/three: 0.163.0 and three: 0.163.0, firefox, and a sample of Mixamo.
Here is my code:

import { Component, OnInit } from '@angular/core';
import * as THREE from 'three'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'

  selector: 'app-home',
  templateUrl: './home.component.html',
  standalone: true

 export class HomeComponent implements OnInit {

    mixer!: THREE.AnimationMixer;

    ngOnInit(): void {

    playAnimation(): void {
        const canvas = document.getElementById('canvas-box');
        const canvasSizes = {
            width: window.innerWidth,
            height: window.innerHeight,

        const scene = new THREE.Scene();

        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);

        const camera = new THREE.PerspectiveCamera(75, canvasSizes.width / canvasSizes.height, 0.001, 1000);
        camera.position.z = 30;

        if (!canvas) return;

        const renderer = new THREE.WebGLRenderer({
            canvas: canvas,
        renderer.setClearColor(0xe232222, 1);
        renderer.setSize(canvasSizes.width, canvasSizes.height);

        let loader = new FBXLoader();
        loader.load('./fbx/Joyful Jump.fbx', (object) => {
                object.position.set(0, 0, 0);
                object.scale.set(0.1, 0.1, 0.1);
                scene.add( object );

                this.mixer = new THREE.AnimationMixer(object);
                let action = this.mixer.clipAction(object.animations[0]);

                console.log("Object is added");
            (xhr) => {
                console.log('xhr: '+ (xhr.loaded / * 100 + '% loaded');
            (error) => {
                console.error("Error in loading fbx file", error);

        const clock = new THREE.Clock()
        const animate = () => {
            renderer.render(scene, camera);



<canvas id="canvas-box"></canvas>

What happens if you try to open http://localhost:4200/sample.fbx in the browser, does it find the file?

1 Like

No it doesn’t (redirekts to home page and it is because such a path is not defined in app.routes.ts).
But inspired by your reply, I changed the location of the .fbx file. Doesn’t matter where I put it, it doesn’t work.

It depends on what you’re using to build and serve files. Usually you’d have some assets / public directory in which you should place static assets - they shouldn’t be their own routes.

1 Like

Right, I put it in the assets and now the error is gone. Thank you.