Three.js創建多個對象

Question

我想創建多個對象。

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; 
    };` 

有了這段代碼，我創建它，但只在一行。我想在第一行的後面創建更多的行。這樣的形象：

What i want to create - Image

我要上紅色的X位置更多的立方體。

Answer 1

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); 
    } 
}; 

See this fiddle