別のクラスで機能するように指示を追加しようとしています（es6）

Question

私はvideo.jsのプロジェクトでビデオとWebページの3Dレンダリングを表示しています。

私は既にWebGLレンダラーを呼び出す関数を持っていますが、この関数は変更したくない別のプラグインで定義されています。 WebGLのレンダラのため

機能（このプラグインは確かにエラーがない）：

var Canvas = function (baseComponent, THREE, settings = {}) { 
    var parent = BaseCanvas(baseComponent, THREE, settings); 

    return Util.extend(parent, { 
    ... 
     render: function(){ 
        parent.render.call(this); 
        this.camera.target.x = 500 * Math.sin(this.phi) * Math.cos(this.theta); 
        this.camera.target.y = 500 * Math.cos(this.phi); 
        this.camera.target.z = 500 * Math.sin(this.phi) * Math.sin(this.theta); 
        this.camera.lookAt(this.camera.target); 

        if(!this.VRMode){ 
         this.renderer.render(this.scene, this.camera); 
        } 
       } 
    ... 
    } 
} 

だから私はCSS3Dレンダラーを作成するために、別のプラグインを作成しましたし、私の問題がある：私はのためのレンダリング機能を呼び出したいですwebglとCSS3Dの私の新しいレンダリング機能を追加します。私はこのようにしました：

class css3d { 
... 

render(){ 
    this.canvas.render.bind(this); 
    this.renderer.render(this.scene, this.canvas.camera) 
    } 
... 
} 

私はエラーが発生しましたが、私のCSSレンダラーは動作していません。そして、私はすでにthree.js properly blending css3d and webglのようなトピックを探しています。つまり、https://gist.github.com/leefsmp/38926bf2c379f604f9b5のようなトピックですが、まだ動作していません。

誰かが私を助けることができましたか？

Answer 1

最後に、自分の解決策を見つけました。クラスに新しいフレームアニメーションを作成しました。だから、私は各レンダラ（WebGLとCSS3D）のための要求アニメーションフレームを持っています。

class css3d{ 
... 

render(){ 
     requestAnimationFrame(this.render.bind(this)); 
     this.renderer.render(this.scene, this.canvas.camera); 
} 
... 
} 

は良い一日を、あなたが言うとき