javascript - Three.js:我可以创建网格来替换很多对象吗？

这是我的工作的链接：maison.whiteplay.fr

我正在尝试做的是3D PacMan，但是看一下代码，我正在使用网格物体来构建我的关卡，除了气泡（黄色圆圈）外，您需要吃点东西才能赢。
它们都是不同的对象，但是由于它们很多，所以很滞后，我可以对气泡使用相同的技术（我认为是网格）吗？如果是，怎么办？

码：

var geometrySphere = new THREE.SphereGeometry( 5, 32, 32 );
var bille = function(x,z){
    this.bille = new THREE.Mesh(
        geometrySphere,
        new THREE.MeshBasicMaterial( {color: 0xffff00} )
    );
    this.bille.position.x = (x-15.5)*100; this.bille.position.y = 100;
    this.bille.position.z = (z-15.5)*100; scene.add(this.bille);
}

感谢您的阅读，如果您对我的代码有任何建议，请不要犹豫：D

最佳答案

您还可以重复使用材质，而不必始终创建新实例：

var geometrySphere = new THREE.SphereGeometry( 5, 32, 32 );
var billeMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var bille = function(x,z){
    this.bille = new THREE.Mesh(
        geometrySphere,
        billeMaterial
    );
    this.bille.position.x = (x-15.5)*100; this.bille.position.y = 100;
    this.bille.position.z = (z-15.5)*100; scene.add(this.bille);
}

重复使用材料对性能有很好的影响。

如何复制网格/对象？