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

【问题标题】：aframe look-controls stopped working when animate function of renderer is implemented实现渲染器的动画功能时，aframe 外观控件停止工作
【发布时间】：2019-01-15 06:38:28
【问题描述】：

我正在实现渲染器的动画功能以扩展一些功能。

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

}

当我注释代码行 comp.renderer.animate(update) 时，外观控件开始工作。我想保持上面的实现和外观控制工作。请提出一种方法。

【问题讨论】：

你想要完成什么？您应该创建一个component 并使用tick 和tock 方法在渲染循环中注入逻辑。
动画循环由A-Frame内部管理，必须使用组件API。

标签： three.js aframe

【解决方案1】：

这是 A-Frame 的渲染函数：

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

组件刻度在tick 上调用。您应该包装渲染调用以扩展它，而不是像这样完全替换它：

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

【讨论】：