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.
Problem:
FBX model can’t be displayed in the Angular app
Software:
Windows 10
VSC
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';
@Component({
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 );
this.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
this.camera.position.set( 100, 200, 300 );
this.loader = new FBXLoader();
this.loader.load('../../assets/PistolAnim.glb', function (object3d) {
console.log(object3d);
object3d.position.set(0,0,0);
this.scene.add(object3d);
});
}
ngAfterViewInit() {
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.rendererContainer.nativeElement.appendChild(this.renderer.domElement);
this.animate();
}
animate() {
window.requestAnimationFrame(() => this.animate());
this.renderer.render(this.scene, this.camera);
}
}