Hello, I am trying to make a fbx viewer, and some fbx objects I can see and others I cannot, I leave here the ones that I don’t and my code.
I am with Angular 10.
The fbx object: https://wearnotch.com/m/B6ifBw6jTP+fmn243BYUeA/
import { Component, ElementRef, Input, ViewChild } from '@angular/core';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
@Component({
selector: 'app-three',
templateUrl: './three.component.html',
styleUrls: ['./three.component.scss'],
})
export class ThreeComponent {
@ViewChild('rendererContainer', { static: false })
rendererContainer!: ElementRef;
loaderType: string | undefined; // OBJ | 3MF
nativeElement: any;
comp: any;
object: any;
// OBJECT
object3D: any;
renderer: any;
camera: any;
scene: any;
controls: any;
mixer: any;
clock = new THREE.Clock();
action: any;
threeDPath: string;
constructor(el: ElementRef) {
this.threeDPath = 'assets/model/notch.fbx';
this.nativeElement = el.nativeElement;
setTimeout(() => {
this.loaderType = this.threeDPath.substr(this.threeDPath.lastIndexOf('.') + 1);
this.play3D();
this.onWindowResize();
this.animate();
});
this.render = this.render.bind(this);
this.onWindowResize = this.onWindowResize.bind(this);
this.onProgress = this.onProgress.bind(this);
this.animate = this.animate.bind(this);
}
animate() {
console.log('Animate');
requestAnimationFrame(this.animate);
const delta = this.clock.getDelta();
if (this.mixer) { this.mixer.update(delta); }
this.render();
}
play3D() {
const domElement = this.nativeElement.children[0];
domElement.innerHTML = '';
this.renderer = new THREE.WebGLRenderer({
antialias: true,
preserveDrawingBuffer: true,
});
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.shadowMap.enabled = true;
this.renderer.setSize(domElement.offsetWidth, domElement.offsetHeight);
domElement.appendChild(this.renderer.domElement);
this.clock = new THREE.Clock();
// create scene
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0x000000);
// add amera
this.scene.add(new THREE.AmbientLight(0xcccccc, 0.4));
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
this.camera.add(new THREE.PointLight(0xffffff, 0.8));
this.scene.add(this.camera);
// add light
const light2 = new THREE.HemisphereLight(0xffffff, 0x444444);
light2.position.set(0, 200, 0);
this.scene.add(light2);
const light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 200, 100);
light.castShadow = true;
light.shadow.camera.top = 180;
light.shadow.camera.bottom = -100;
light.shadow.camera.left = -120;
light.shadow.camera.right = 120;
this.scene.add(light);
// axes
this.scene.add(new THREE.AxesHelper(20));
// controls
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
// ground
const mesh = new THREE.Mesh(
new THREE.PlaneBufferGeometry(2000, 2000),
new THREE.MeshPhongMaterial({ color: 0xD0BB95, depthWrite: false }),
);
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
this.scene.add(mesh);
const grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
// grid.material.opacity = 0.2;
// grid.material.transparent = true;
this.scene.add(grid);
// loader
const loader = new FBXLoader();
loader.load(
this.threeDPath,
(objLoaded: any) => {
this.object3D = objLoaded;
console.log('Object', objLoaded);
const box = new THREE.Box3().setFromObject(objLoaded);
const size = box.getSize(new THREE.Vector3()).length();
const center = box.getCenter(new THREE.Vector3());
this.controls.reset();
// position
objLoaded.position.x += objLoaded.position.x - center.x;
objLoaded.position.y += objLoaded.position.y ;
objLoaded.position.z += objLoaded.position.z - center.z;
this.controls.maxDistance = size * 10;
this.camera.near = size / 100;
this.camera.far = size * 100;
this.camera.updateProjectionMatrix();
this.camera.position.copy(center);
this.camera.position.x += size / 2.0;
this.camera.position.y += size / 5.0;
this.camera.position.z += size;
this.camera.lookAt(center);
// animation
// Create an AnimationMixer, and get the list of AnimationClip instances
this.mixer = new THREE.AnimationMixer(objLoaded);
this.action = this.mixer.clipAction(objLoaded.animations[0]);
console.log('ACTION LOAD', this.action);
// Play a specific animation
this.action.play();
objLoaded.traverse((child: any) => {
if (child.isMesh) {
child.castShadow = true;
child.receiveShadow = true;
}
});
this.scene.add(objLoaded);
this.controls.update();
this.onWindowResize();
},
this.onProgress,
);
window.addEventListener('resize', this.onWindowResize, false);
}
onProgress(xhr: any) {
if (xhr.lengthComputable) {
const percentComplete = (xhr.loaded / xhr.total) * 100;
console.log('model ' + percentComplete + '% downloaded');
}
}
onWindowResize() {
const domElement = this.nativeElement.children[0];
this.camera.aspect = domElement.offsetWidth / domElement.offsetHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth * 0.8, window.innerHeight * 0.8);
}
render() {
this.renderer.render(this.scene, this.camera);
}
}