Question

我正在尝试使用three.js渲染3d对象。但是，当我尝试初始化动画循环（在ngAfterViewInit内）时，始终出现以下错误：

TypeError: Cannot read property 'ngZone' of undefined

为了降低cpu成本，我使用ngZone在Angular之外触发requestAnimationFrame。即使删除ngZone的代码，我仍然会遇到以下错误：

TypeError: Cannot read property 'animate' of undefined

所有这些都在加载适当的资源之后发生。为避免混淆，ngZone没有类作用域变量，只是在构造函数中将其作为参数调用。

代码：

export class ProductComponent{
//setup variables
// shirt model and texutre are pulled 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();

    }

}

Answer 1

在方法this.animate内部调用

loadResources。在这里，您将其作为最后一个参数传递：

this.loadResources(this.modelValue, this.texture, this.scene, this.renderer, this.container, this.animate);

问题是this.animate将在callback的{{1}}内部被调用，而此this.loader.load是常规函数，因此callback在{{ 1}}将没有this或animate。可能的解决方案是对ngZone中的animate使用箭头功能（因为callback将在其内部被调用）：

this.loader.load

或者，如果您想将常规函数用作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); // use arrow function for callback of this.loader.load this.loader.load(model, (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); // this.animate callback(); }); //onProgress, onError }绑定到this.loader.load：

this

Angular 7 ngZone引发未定义错误

1 个答案: