Three.js Create multiple objects

Question

I want to create multiple objects.

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

With this code i create it, but only in one row. I want to create more rows on the back of the first row. Like this image:

What i want to create - Image

I want more cubes on the Red X position.

2pha · Accepted Answer · 2016-12-27 08:25:06Z

2

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

answered Dec 27, 2016 at 8:25

2pha

10.2k2 gold badges32 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Three.js Create multiple objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related