三维模型阵列

  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);//网格模型添加到场景中
            }
        }
    }