Javascript Three.js创建多个对象

我想创建多个对象

    var distance = 10;
    var geometry = new THREE.BoxGeometry(10,10,10);
    var material = new THREE.MeshBasicMaterial({color:0x00ff44});

    for(var i = 0; i < 4;i++){
        var mesh  = new THREE.Mesh(geometry, material);
        mesh.position.z = distance;
        scene.add(mesh);
        distance += 5;
    };`

var距离=10；
var geometry=新的三箱几何体（10,10,10）；
var material=new THREE.MeshBasicMaterial（{color:0x00ff44}）；
对于（变量i=0；i<4；i++）{
var mesh=新的三个网格（几何体、材质）；
网格位置z=距离；
场景。添加（网格）；
距离+=5；
};`

我用这段代码创建了它，但只在一行中创建。我想在第一行的后面创建更多行。如下图所示：

我希望在红色X位置上有更多的立方体。

var xDistance=50；
var xDistance = 50;
var zDistance = 30;
var geometry = new THREE.BoxGeometry(10,10,10);
var material = new THREE.MeshBasicMaterial({color:0x00ff44});

//initial offset so does not start in middle.
var xOffset = -80;

for(var i = 0; i < 4; i++){
    for(var j = 0; j < 3; j++){
            var mesh  = new THREE.Mesh(geometry, material);
            mesh.position.x = (xDistance * i) + xOffset;
            mesh.position.z = (zDistance * j);
            scene.add(mesh);
    }
};

var zDistance=30；
var geometry=新的三箱几何体（10,10,10）；
var material=new THREE.MeshBasicMaterial（{color:0x00ff44}）；
//初始偏移，因此不会从中间开始。
var xOffset=-80；
对于（变量i=0；i<4；i++）{
对于（var j=0；j<3；j++）{
var mesh=新的三个网格（几何体、材质）；
mesh.position.x=（xDistance*i）+xOffset；
网格位置z=（z距离*j）；
场景。添加（网格）；
}
};

var xDistance=50；
var zDistance=30；
var geometry=新的三箱几何体（10,10,10）；
var material=new THREE.MeshBasicMaterial（{color:0x00ff44}）；
//初始偏移，因此不会从中间开始。
var xOffset=-80；
对于（变量i=0；i<4；i++）{
对于（var j=0；j<3；j++）{
var mesh=新的三个网格（几何体、材质）；
mesh.position.x=（xDistance*i）+xOffset；
网格位置z=（z距离*j）；
场景。添加（网格）；
}
};