Question

我已经设置了three.js组件，但是每次我尝试渲染我的对象（从Cloud Firestore下载）时，都会引发以下错误：

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();

    }
}

three.js使用Angular 7抛出“ null”错误

0 个答案: