試圖添加說明功能在另一個類（es6）

我正在與video.js項目工作，以顯示視頻和網頁的3D渲染。試圖添加說明功能在另一個類（es6）

我已經有了一個調用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但仍然無法正常工作。

有人可以幫我嗎？

來源

2017-02-27 Hugo Jové

你時，你說_「，但我的CSS渲染器不工作「_？它沒有被調用？它被稱爲，但不是做你想要的東西？它被調用，但原始的'render（）'代碼沒有被調用？你有沒有放置任何中斷點，並通過調用調用，看看它是否按照你期望的那樣做，以及如果這個範圍是你期望的？ – Phrogz

感謝您的答案，這兩個函數（呈現（）與webgl和我的函數render（）被調用，但我不知道如何通過調用一個斷點。這是我第一次需要使用它。：/ –

請參閱_ [在Chrome DevTools中調試JavaScript入門]（https://developers.google.com/web/tools/chrome-devtools/javascript/）_或_ [如何瀏覽您的代碼]（ https://developers.google.com/web/tools/chrome-devtools/javascript/step-code)_。 – Phrogz

最後，我發現我的解決方案，我在我的課程中創建了一個新的框架。所以現在我已經爲每個渲染器（WebGL和CSS3D）提供了一個請求動畫幀。

結果看起來是這樣的，如果一些感興趣的是：

class css3d{ 
... 

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

有一個好的一天，你是什麼意思感謝幫助

來源

2017-12-14 13:52:07

試圖添加說明功能在另一個類（es6）

回答

相關問題