Question

我正在开发一个带有video.js的项目，用于显示视频和网页的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

最后，我找到了解决方案，我在课堂上创建了一个新的frameanimation。所以现在我为每个渲染器（WebGL和CSS3D）都有一个请求动画帧。

如果有人对以下内容感兴趣，结果如下：

class css3d{
...

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

度过美好的一天，感谢您的帮助

尝试添加指令以在另一个类中运行（es6）

1 个答案: