Three.js 三维模型阵列

Question

three.js 并没有提供几何体或网格模型阵列的 API，不过可以通过 for 循环结构自定义。

直线阵列

沿着 x 轴方向绘制 10 个立方体，立方体几何中心的距离是 15

/**
 * 阵列立方体网格模型
 */
var box=new THREE.BoxGeometry(10,10,10);//创建一个立方体几何对象
var material=new THREE.MeshLambertMaterial({color:0x0000ff});//材质对象
for(var x = 0;x<10;x++){//10表示立方体数量
  var mesh=new THREE.Mesh(box,material);//网格模型对象
  mesh.position.set(x*15,0,0);//立方体间距15（阵列距离）
  scene.add(mesh);//网格模型添加到场景中
}

整体平移立方体

创建好所有立方体网格模型后，如果你希望整体进行平移操作，不可能一个一个执行平移操作，这时候可以利用 Object3D 对象对网格模型进行分组。Object3D 对象和场景对象 Scene 一样具有 add 方法，通过该方法可以把网格模型进行归类分组，如果你使用过任何三维模型软件，应该都有装配体或组的概念，几个三维模型是一组，Object3D 对象支持嵌套，你也可以把 Object3D 对象进行再次归类，就像一辆汽车一样，有部件、组件、零件分不同层级组成一个树状结构。

/**
 * 阵列立方体网格模型
 */
var box=new THREE.BoxGeometry(10,10,10);//创建一个立方体几何对象
var material=new THREE.MeshLambertMaterial({color:0x0000ff});//材质对象
var object = new THREE.Object3D();//创建Object3D对象
for(var x = 0;x<10;x++){//10表示立方体数量
  var mesh=new THREE.Mesh(box,material);//网格模型对象
  mesh.position.set(x*15,0,0);//立方体间距15（阵列距离）
  object.add(mesh);//网格模型添加到Object3D对象中
}
object.translateX(-70);//平移所有网格模型
scene.add(object);//网格模型添加到场景中

平面阵列

沿着 x 轴、y 轴两个方向进行阵列，产生一个 10X10 的方阵。

for(var y = 0;y<10;y++){//10表示y方向立方体数量
  for(var x = 0;x<10;x++){//10表示x方向立方体数量
    var mesh=new THREE.Mesh(box,material);//网格模型对象
    mesh.position.set(x*15,y*15,0);//立方体间距15（阵列距离）
    object.add(mesh);//网格模型添加到场景中
  }
}

三维阵列

沿着 x 轴、y 轴、z 轴三个方向进行阵列，产生一个 10x10x10 的方阵。

for(var z = 0;z<10;z++){//10表示z方向立方体数量
  for(var y = 0;y<10;y++){//10表示y方向立方体数量
    for(var x = 0;x<10;x++){//10表示x方向立方体数量
      var mesh=new THREE.Mesh(box,material);//网格模型对象
      mesh.position.set(x*15,y*15,z*15);//立方体间距15（阵列距离）
      object.add(mesh);//网格模型添加到场景中
    }
  }
}