I've been struggling to display a 3D object using three.js. Every time I attempt to start the animation loop (within ngAfterViewInit), I keep encountering the same error:
TypeError: Cannot read property 'ngZone' of undefined
In an effort to optimize CPU usage, I am utilizing ngZone to trigger requestAnimationFrame outside of Angular. Even after removing the ngZone code, I still face this error:
TypeError: Cannot read property 'animate' of undefined
All of this is happening after the necessary resources have finished loading. Just to clarify, there is no class-level variable for ngZone - it is simply called as a parameter in the constructor.
Below is the relevant code snippet:
export class ProductComponent{
//setup variables
// shirt model and texture are fetched from Firebase storage
constructor(private storage : AngularFireStorage, public ngZone: NgZone) {
this.modelUrl = this.storage.ref('path/to/model.obj').getDownloadURL();
this.textureUrl = this.storage.ref('path/to/texture.jpg').getDownloadURL();
this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
this.scene = new THREE.Scene();
this.controls = new THREE.OrbitControls(this.camera,this.renderer.domElement);
this.clock = new THREE.Clock();
this.manager = new THREE.LoadingManager();
this.loader = new THREE.OBJLoader(this.manager);
}
ngAfterViewInit(){
//setup
this.loadResources(this.modelValue, this.texture, this.scene, this.renderer, this.container, this.animate);
}
private loadResources(model, texture, scene, renderer, container, callback){
this.camera.position.set(0, 0, 50);
this.camera.lookAt(new THREE.Vector3(0, 0, 0));
// scene
scene.fog = new THREE.FogExp2(0xffffff, 0.0003);
const ambientLight = new THREE.AmbientLight(0xcccccc, 0.4);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0xffffff, 0.8);
this.camera.add(pointLight);
scene.add(this.camera);
this.loader.load(model, function (object) {
object.traverse(function (child) {
if (child instanceof THREE.Mesh) {
child.material.map = texture;
// repeat image on model
child.material.map.wrapS = child.material.map.wrapT = THREE.RepeatWrapping;
child.material.map.repeat.set(4, 4);
child.material.needsUpdate = true;
}
});
object.scale.set(1.5, 1, 1.5);
scene.add(object);
console.log('PARTS:', object.children);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(scene.fog.color);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
callback();
}); //onProgress, onError
}
animate() : void {
this.ngZone.runOutsideAngular(() => {
requestAnimationFrame(this.animate);
});
this.render();
this.update();
}
}