Question

在我的场景中，我有4个点光源，其中3个连接在相机上，大约100到300个立方体。我有很多类别的立方体，每个立方体在100 - 300之间。根据用户菜单选择，我的场景中可能只会出现一类立方体。

（100个多维数据集的类别）renderer.info：

memory: 
  Objectgeometries: 2
  programs: 3
  textures: 100
render: 
  calls: 203
  faces: 1360
  points: 0
  vertices: 4080

在循环中，我为每个类别生成我的立方体，如下所示：

var materials = [   
    backgroundMaterial,
    backgroundMaterial,
    backgroundMaterial,
    backgroundMaterial,
    productMaterial,
    backgroundMaterial
];

var cubeMaterial = new THREE.MeshFaceMaterial( materials );

var object3D = new THREE.Mesh( geometryBox, cubeMaterial );

材料backgroundMaterial在循环中定义一次;

var backgroundMaterial = new THREE.MeshPhongMaterial({
    color: this.options.models.boxColor,
    specular: this.options.models.boxSpecular,
    //emissive : 0xefefef,
    //side: THREE.DoubleSide,
    overdraw: false,
    transparent: false,
    metal:true,
    shininess: this.options.models.boxShininess,
    reflectivity: this.options.models.boxReflectivity,
    fog:false
});

和productMaterial每次都在循环内，因为每个立方体的纹理都不同。

var productMaterial = new THREE.MeshBasicMaterial({
    map: productModelTexture,
    color: that.options.models.boxColor,
    specular: that.options.models.boxSpecular,
    //emissive : 0xefefef, 
    side: THREE.FrontSide,
    overdraw: false,
    transparent: false,
    metal:true,
    shininess: that.options.models.textureShininess,
    reflectivity: that.options.models.textureReflectivity,
    opacity: 1,
    fog:false
});

此时我不会将网格添加到场景中，并且它们设置为visible = false

之后我将立方体推入数组对象中，该对象内的每个数组都是一类长度在100到300之间的立方体。

当我的应用程序启动时，我会运行一个类似下面的动画，它会将一类立方体带入场景。

helix : function( category ) {

    if ( this.models[category] && this.models[category].length > 0 ) {              

        TWEEN.removeAll();

        new TWEEN.Tween( this.camera.position ).to( {x:0,y:0,z:90000}, 1000 ).easing( TWEEN.Easing.Exponential.InOut ).start(); 
        new TWEEN.Tween( this.camera.rotation ).to( {x:0,y:0,z:0}, 1000 ).easing( TWEEN.Easing.Exponential.InOut ).start();             

        this.models.reset( category );

        for ( var i in this.models[category] ) {

            var model = this.models[category][i];
                model.visible = true;
                this.scene.add( model );

            new TWEEN.Tween( model.position ).to({
                x: model.helix.position.x,
                y: model.helix.position.y,
                z: model.helix.position.z
            }, randBtwn( 1000, 3000 ) ).easing( TWEEN.Easing.Exponential.InOut ).delay( 1001 ).start();

            new TWEEN.Tween( model.rotation ).to( {
                x: model.helix.rotation.x,
                y: model.helix.rotation.y,
                z: model.helix.rotation.z
            }, randBtwn( 1000, 3000 ) ).easing( TWEEN.Easing.Exponential.InOut ).delay( 1001 ).onComplete(function(){

            }).start();
        }

    }

}.bind( that )

此外，你会注意到helix中的另一个函数调用，这个函数调用：this.models.reset( category );

下面是代码，主要是重置对象位置并将它们设置为visible = false，最后将它们从场景中删除。

reset : function( category, callback ) {

    for ( var j in this.models ) {

        if ( this.models[j] instanceof Array && this.models[j].length > 0 && category !== j ) {

            for ( var i in this.models[j] ) {

                var model = this.models[j][i];
                    model.visible = true;

                new TWEEN.Tween( model.position ).to({
                    x: model.outside.position.x,
                    y: model.outside.position.y,
                    z: model.outside.position.z
                }, 1000 ).easing( TWEEN.Easing.Exponential.InOut ).start();

                new TWEEN.Tween( model.rotation ).to( {
                    x: model.outside.rotation.x,
                    y: model.outside.rotation.y,
                    z: model.outside.rotation.z
                }, 1000 ).easing( TWEEN.Easing.Exponential.InOut ).onComplete(function ( m ){

                    m.visible = false;
                    this.scene.remove( m );

                    if ( callback ) {
                        callback();
                    }

                }.bind( that, model )).start();
            }

        }

    }

}.bind( that )

在个人电脑中，一切顺利，我以36 fps运行。我的gpu是一个新的nvidia GTX（我不知道36是否可以接受）。

问题在于，当我尝试在我的nexus 5上使用最新的chrome运行我的应用程序时，在场景外的立方体转换和其他立方体进入之间会出现巨大的fps损失。大多数情况下，这会导致Chrome崩溃...除此之外，如果我没有更改类别且没有播放动画，则可以在我的手机中正常运行。

PS：我无法合并几何图形，因为每个网格都必须在用户选择时自行移动。（如果我没有错过至少）

这种性能下降/崩溃的原因可能是什么，以及如何在场景外移动200个立方体而在场景中移动200个立方体的类似场景？是否有任何我应该考虑的提示，请记住，我仍然是three.js的新手。

任何其他来源可能是原因请告诉我，我会更新我的问题。

Answer 1

首先，36 fps是可以接受的。根据经验，我使用25 fps是最低限度。

现在解决这个问题。 nexus 5的gpu比你的pc慢得多。由于着色器直接传递给gpu，速度很重要。当你试图在预算电脑上播放孤岛危机时，同样的问题，gpu并不足以足够快地处理所有数据。

MAY 是将所有立方体几何图形添加到单个网格中的解决方案，可能使用THREE.MeshFaceMaterial将不同的材质应用于每个立方体。具有100个几何图形的单个网格比使用1个几何图形的100个网格处理得更快。但正如我所说。也许这根本不能解决任何问题，它更像是一个冰雹玛丽。

编辑：在单个网格中添加几何图形并检测单击的几何图形。

我更多地考虑了它，并且可以检测点击的几何体。它不漂亮，但它可能会给你一些关于如何做到漂亮的想法。只需将另一个属性添加到几何体的面上即可。

var addGeometry = function(baseGeometry, addedGeometry){
    for(i in addedGeometry.faces){
        addedGeometry.faces[i].parent = addedGeometry;
    }
    baseGeometry.add(addedGeometry);
}

然后，当光线投射时，你不会调用object属性，而是调用face.parent属性，它应该包含点击的几何体，你可以随意操作它。

但同样，我不知道这将如何表现明智。值得一试。

您可以尝试使用webworkers的其他内容。

Three.js在100个立方体动画上崩溃

1 个答案: