实现渲染器的动画功能时，aframe外观控件停止工作

Question

I am implementing animate function of renderer to extend some of the functionalities.

this.scene = document.querySelector('a-scene').object3D;
this.renderer = document.querySelector('a-scene').renderer;

var comp = this;
this.scene.children.forEach(element => {

    element.traverse(function (node) { 

        if(node.type === "PerspectiveCamera"){
            comp.camera = node;
            comp.renderer.animate( update )
        }
    });
}); 

function update(){

    if(THREE.VRController){
        THREE.VRController.update();
    }

    var scene = document.querySelector('a-scene').object3D;
    var renderer = document.querySelector('a-scene').renderer;

    scene.children.forEach(element => {

        element.traverse(function (node) { 

            if(node.type === "PerspectiveCamera"){
                var camera = node;
                var lookcontrols = node.el.components['look-controls'];
                if(lookcontrols){
                    lookcontrols.play();
                }
                renderer.render( scene, camera );
            }
        });
    });

}

When I comment the line of code comp.renderer.animate( update ) look-controls starts working. I want to keep above implementation and also look-controls working. Please suggest a way.

Answer 1

Here's A-Frame's render function:

        var renderer = this.renderer;

        this.frame = frame;
        this.delta = this.clock.getDelta() * 1000;
        this.time = this.clock.elapsedTime * 1000;

        if (this.isPlaying) { this.tick(this.time, this.delta); }

        renderer.render(this.object3D, this.camera, this.renderTarget);

The component ticks are called on the tick . You should wrap the render call to extend it rather than replacing it completely like:

sceneEl.prototype.render = {
  value: function () {
    // Your code here.
    originalRender();
    // More of your code here.
  }
}