Я установил компонент three.js, но каждый раз, когда я пытаюсь отобразить свой объект (скачанный из облачного пожарного хранилища), выдается следующая ошибка:
Uncaught TypeError: Cannot read property 'ngZone' of null
ERROR Error: OBJLoader: Unexpected line: "<!doctype html>"
Есть идеи, почему это может быть?Я думаю, что это возможно сделать с жизненным циклом компонента / three.js.
export class ProductComponent {
//@ViewChild('rendererContainer') rendererContainer: ElementRef
private container: any = document.createElement('div');
private modelUrl: Observable <string | null>;
private modelValue : string;
private textureUrl: Observable <string | null>;
private textureValue : string;
private renderer = new THREE.WebGLRenderer();
private camera = null;
private scene = null;
private controls = null;
private clock = null;
constructor(private storage : AngularFireStorage, public ngZone: NgZone) {
this.modelUrl = this.storage.ref('path/to/obj.obj').getDownloadURL();
this.modelUrl.subscribe(value => this.modelValue = value);
this.textureUrl = this.storage.ref('path.to.text.jpg').getDownloadURL();
this.textureUrl.subscribe(value => this.textureValue = value);
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();
}
ngAfterViewInit() {
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setClearColor(this.scene.fog.color);
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.container.appendChild(this.renderer.domElement);
this.container.className = 'shirt_Model_Div';
const modelDiv = document.getElementById('shirtModelDiv');
modelDiv.appendChild(this.container); //error occurs here
this.renderer.setSize($(modelDiv).width(), $(modelDiv).height(), $(modelDiv).maxHeight);
this.animate();
}
ngOnInit() {
//additional setup
}
animate() : void {
this.ngZone.runOutsideAngular(() => { //error occurs here
requestAnimationFrame(this.animate);
});
this.render();
this.update();
}
}