试图添加说明功能在另一个类（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）

回答

相关问题