准备应用程序的OO结构后，无法使用three.js渲染多维数据集

Question

当您的代码很简单时，但是要使用OO-style模块逻辑准备应用程序的未来结构时，使用three.js渲染立方体或任何其他几何图形就像水晶一样清晰。可能会遇到一些问题。 我也有...

如果您怀疑我是否可以使用简单代码旋转多维数据集，请查看CodeReview 上的链接以开始信任我:)

https://codereview.stackexchange.com/questions/33375/webgl-three-js-simple-application-only-js-without-html-css

但是这个问题是关于其他问题的...我已经准备了原型OO风格的应用程序（我认为它主要是正确设计的），但是我在使用简单的render时遇到了麻烦:(

完整的源代码： http : //jsfiddle.net/85TXa/

在本地主机上运行时，控制台中没有错误：

带有requestAnimationFrame（opt ...）的部分也没有向控制台抛出任何异常：

正如您所看到的，可以在断点处捕获需要渲染的循环...如果要检查场景的子级集合，则有一个多维数据集：

所以...成功地添加了一个立方体几何网格。 可以随时捕获带有requestAnimationFrame /渲染过程的循环。

我建议... bind()函数可能有问题，我曾在其中使用它：

GC3D.Utils.prototype.renderScene = function() {
    // about bind()
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
    requestAnimationFrame( GC3D.Utils.prototype.renderScene.bind( this ) );
    this.renderer.render( this.scene, this.camera );

    // for test purpose only
    this.scene.children.filter(function( item ) {
        if ( item instanceof THREE.Mesh ) item.rotation.x += 0.02;
    });
    //
};

也许这里有问题？ 请给我一些建议！

谢谢

PS：我发布的代码是我自己真正开发的（您也可以在SO上保留我的昵称，这是一个提示:)），我公司也有积极的决心将这些资源公开，所以不要害怕js文件开头的注释：)

更新＃1：我发现我忘记设置Camera的位置了，我添加了一些代码：

GC3D.Utils.prototype.setCameraPosition = function( camera, newPosition ) {
    if ( camera instanceof THREE.Camera ) camera.position.set( newPosition.x, newPosition.y, newPosition.z );
    else return -1;
};
...
this.utils.setCameraPosition( this.utils.camera, { x: 3, y: 3, z: 3 } );

但是，没有成功！ :(未显示该框...控制台显示，该摄像头具有我设置的新位置：

新的完整源代码： http : //jsfiddle.net/naFLN/

Answer 1

通常，所有这些都使用GC3D.Utils.prototype.renderScene的bind（）函数。

实际的问题是忘记将渲染器的DOM元素附加到文档主体中：

document.body.appendChild( this.utils.renderer.domElement );
this.utils.renderer.setSize( window.innerWidth, window.innerHeight );

上面的代码行修复了我的应用程序，现在它运行良好！