【微信小程序】threejs 生成一列5个的连续小正方体

效果示例

要求：生成一列5个的连续小正方体

代码说明

//正方体
    const geometryBox = new THREE.BoxGeometry(1., 1., 1.);
    const materialBox = new THREE.MeshBasicMaterial({
      color: 0x0088ff,
      transparent: true,
      //opacity: 0.4,
      depthTest: false,
      depthWrite: false
    });
    
    zzz = -1.5
    // for (let i = 0; i < this.data.todayUseList.length; i++) {
      for (let i = 0; i < 12; i++) {
      const box = new THREE.Mesh(geometryBox, materialBox);
      let x = 0
      let y = 0
      if( i <= 4 ){
        zzz += 1.5
      }else{
        //列
        if(i % 5 == 0){
          zzz = -1.5
        }
        //行
        x += parseInt(i/5) * 1.5
        zzz += 1.5
      }

      console.log("(x,y,z)", x,y,zzz);       
      box.position.set(x,y,zzz)
      scene.add(box);
    }

重点说明

if( i <= 4 ){
zzz += 1.5
}else{
//列
if(i % 5 == 0){
zzz = -1.5
}
//行
x += parseInt(i/5) * 1.5
zzz += 1.5
}

判断%==0即都能除尽，i是5的倍数，得换行
parseInt()返回一个整数 ，几行加几个1.5
z竖着走，+=1.5

如图，y轴不变；x轴列不变，行变；z轴都变（从列一个个加所以都变）