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

Questions
,
1

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:
.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  standalone: true
})

 export class HomeComponent implements OnInit {

    mixer!: THREE.AnimationMixer;

    ngOnInit(): void {
        this.playAnimation();
    }

    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);
        scene.add(ambientLight);

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

        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]);
                action.play();

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

        const clock = new THREE.Clock()
        const animate = () => {
            window.requestAnimationFrame(animate);
            this.mixer.update(clock.getDelta())
            renderer.render(scene, camera);
        };

        animate();
    }
}

.html:

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

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

1 Like
3

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.

4

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
5

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