three.js性能研究——第一篇

现在开源的webgl引擎中，three.js是功能最丰富的，而且社区活跃，使用简单，但是它的性能确实不太理想。本系列就和大家一一探究three.js的性能到底如何，原因是什么，以及有什么改进方案。
首先我们模拟一个理论上性能最好的使用场景，scene下创建10000个sphere，每个sphere大概6000个顶点（测试显卡为mac Radeon Pro 555X 4 GB，相当于GTX1050左右）
代码如下：

var geometry =  new THREE.SphereBufferGeometry( 5, 32, 32 );
var material = new THREE.MeshBasicMaterial({transparent:false, color:new THREE.Color(1,0,0)});
 for ( var i = 0; i < 8000; i ++ ) {
            var mesh = new THREE.Mesh( geometry, material );
            mesh.position.x = Math.random() * 1600 - 800;
            mesh.position.y = 0;
            mesh.position.z = Math.random() * 1600 - 800;
            mesh.updateMatrix();
            mesh.matrixAutoUpdate = false;
            scene.add( mesh );
        }  

我们共用同一个材质,共用同一个geometry，不产生多余的节点，关掉scene的autoUpdate，使用basic材质，排除灯