Rendering FBX model in Angular

Hello everyone,
I’m newbie in the 3D and three.js, currently doing some project in Angular and trying to render 3D Model in the component. I try to approach this with FBX which I downloaded for free and added one animation using mixamo. Somehow it’s not displayed.

FBX model can’t be displayed in the Angular app

Windows 10
Angular 8.2.14
Three.js 0.110.0
TypeScript 3.5.3

I tried:
Uploading some other example FBX files, converting it to GLB.

This is the result in my browser, console not showing any errors, Im console logging the 3D Object which seems to load properly to the app but somehow is not displaying.

I won’t be surprised if problem is trivial, but Im not sure if Angular supports such a things, I had some fun searching for solution how to properly add Three.js to Angular project.

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

  selector: 'app-workout',
  templateUrl: './workout.component.html',
  styleUrls: ['./workout.component.scss']
export class WorkoutComponent {

  @ViewChild('rendererContainer', null) rendererContainer: ElementRef;

  readonly header: string = 'abs';

  renderer = new THREE.WebGLRenderer();
  scene = null;
  camera = null;
  mesh = null;
  loader = null;

  constructor() {
      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color( 0xa0a0a0 ); = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 ); 100, 200, 300 );

      this.loader = new FBXLoader();

      this.loader.load('../../assets/PistolAnim.glb', function (object3d) {


  ngAfterViewInit() {
      this.renderer.setSize(window.innerWidth, window.innerHeight);

  animate() {
      window.requestAnimationFrame(() => this.animate());

Can you please share the FBX and converted glb file in this topic?


You are trying to load a glTF asset with FBXLoader which can’t work. Try to load the glTF asset similar to this example:

The asset itself is actually loaded and rendered correctly using the following three.js based gltf-viewer.

Ok in this case I copied GLTF file, but I tried to load FBX in this example and also didn’t work.