three js does not load model (Angular) (GLTF Loader)

I’m using an Angular 19 component to load a 3-D model of Earth and make it spin. The only console message I see is THREE.GLTFLoader: Unknown extension "KHR_materials_pbrSpecularGlossiness", which doesn’t appear to stop the scene from rendering. Has anyone run into this issue or know how to resolve it? Thanks!

import { AfterViewInit, Component, OnInit } from '@angular/core';
import * as THREE from 'three';
import { DOCUMENT } from '@angular/common';
import { Directive, EventEmitter, HostListener, Inject, Input, Output } from '@angular/core';
import { ShowArticleComponent } from "../show-article/show-article.component";
import { OrbitControls } from 'three-orbitcontrols-ts';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

@Component({
selector: 'app-world-spinning',
imports: [],
templateUrl: './world-spinning.component.html',
styleUrl: './world-spinning.component.css'
})
export class WorldSpinningComponent implements OnInit, AfterViewInit {
private doc: Document;

// Three.js global variables
private scene!: THREE.Scene;
private camera!: THREE.PerspectiveCamera;
private loader!: GLTFLoader;
private loadedModel: any = null;
private renderer!: THREE.WebGLRenderer;
private topLight!: THREE.DirectionalLight;
private topLight2!: THREE.DirectionalLight;
private ambientLight!: THREE.AmbientLight;
private controls!: OrbitControls;
private startRotation: boolean = true;
private canvas: any = null;

constructor(@Inject(DOCUMENT) doc: any) {
this.doc = doc;
}

ngOnInit(): void {
}

ngAfterViewInit(): void {
this.createThreeJsBox();
}

createThreeJsBox(): void {
// Scene for animation + Camera

this.canvas = this.doc.getElementById("canvas-box");

this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
this.camera.position.set(100, 100, 400); // Position camera away from the model
this.camera.lookAt(0, 0, 4); // Point camera to the origin

// Loader
this.loader = new GLTFLoader();

// Render the model
this.loader.load(
`earth/scene.gltf`,
(gltf) => {
// Add to scene
this.loadedModel = gltf.scene;
this.scene.add(this.loadedModel);
},
(xhr) => {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
(error) => {
// In case of errors
console.error(error);
}
);

// Instantiate a new renderer and set its size
this.renderer = new THREE.WebGLRenderer({ alpha: true }); // Alpha: true allows for the transparent background
this.renderer.setSize(window.innerWidth, window.innerHeight);

// Add the renderer to the DOM
this.canvas.appendChild(this.renderer.domElement);

// Add lights to the scene, so we can actually see the 3D model
this.topLight = new THREE.DirectionalLight(0xffffff, 4); // (color, intensity)
this.topLight.position.set(100, 100, 1000); // top-right-ish
this.topLight.castShadow = true;
this.scene.add(this.topLight);

this.topLight2 = new THREE.DirectionalLight(0xffffff, 4); // (color, intensity)
this.topLight2.position.set(500, 500, 500); // top-right-ish
this.topLight2.castShadow = true;
this.scene.add(this.topLight2);

this.ambientLight = new THREE.AmbientLight(0x333333, 3);
this.scene.add(this.ambientLight);

this.renderer.render(this.scene, this.camera);

this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.minDistance = 0; // Prevent zooming too close
this.controls.maxDistance = 1000; // Prevent zooming too far
this.controls.update();

// Animation Loop
this.animate();

// Resize Listener
window.addEventListener("resize", () => {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
});
}

animate = (): void => {
requestAnimationFrame(this.animate);

if (this.loadedModel && this.startRotation) {
this.loadedModel.rotation.y += 0.01; // Adjust speed as needed
}

this.controls.update();
this.renderer.render(this.scene, this.camera);
}
}


I have tried to change the camera position multiple times and also the camera.LookAt. I also put the gltf model in the public folder and it seems to be ok.

Continue reading...