为什么球体几何体比立方体几何体需要更多时间来渲染，而它们都具有相同的面值？

Question

我从 BoxGeometry 创建了一个立方体，并从 SphereGeometry 创建了一个球体。 （那些物体自转） 当两个对象的数量都增加时，我发现球体比立方体需要更多的时间来渲染。 例如

500 个立方体获得 60 FPS

500 个球体获得 45 FPS

而每个对象都有相同的 12 个面。

为什么会这样？

for(var i = 0; i <amount ; i++){
    posX = posX + size;

    if(i%20 == 0){
        posX = -105;
        posZ = posZ + size;
    }

    if(i%500 == 0){
        posX = -105;
        posZ = -500;
        posY = posY + size;
    } // To fit for view, five hundred objects were stacked per level. 

        sphereGeo = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
        sphereMat = new THREE.MeshPhongMaterial({ color: 0x219621, specular: 0xFFE7BA, shininess: 5, opacity: 1, transparent: true});
        sphereMesh = new THREE.Mesh(sphereGeo, sphereMat);
        sphereMesh.rotation.x =0;
        sphereMesh.rotation.y =0;
        sphereMesh.rotation.z =0;
        sphereMesh.position.x = posX;
        sphereMesh.position.y = posY;
        sphereMesh.position.z = posZ;
        sphereMesh.matrixAutoUpdate = false;
        sphereMesh.updateMatrix();
        sphereMesh.address = i;
        countID = i;

        objectsID[countID] = sphereMesh;
        addList[sphereMesh.address] = objectsID[countID];
        scene.add(objectsID[countID]);
    }

function render()
{
    var add_len = addList.length;
    for(var i=0; i< add_len; i++ )
        {
            addList[i].rotation.y += 1;
            addList[i].matrixAutoUpdate = false;
            addList[i].updateMatrix();
        }
    renderer.render( scene, camera );
    requestAnimationFrame( render ); 
}

这些是给

的图片

500 个球体

500 个立方体

我设置半径 = 25，WidthSegments = 3 和 heightSegments = 2 .所以它有 12 个面，但输出不同于球形 （3 和 2 是在三个.js 文档中定义的最小值）

对于创建立方体，我使用相同的方法，每个立方体有 12 个面。 两个测试用例都运行在同一个环境中。

我想知道为什么他们有不同的表现。 可能是由 BoxGeometry 和 SphereGeometry 内部的结构引起的？

Answer 1

两个对象的面是否总是指向同一方向（例如，您是否以某种方式从球体中创建了一个“12 面立方体”）？

如果不是，那么非立方体对象上的法线和光照会更加多样化，因为立方体将有更多的面可以共享相同的数据（更少的计算）。