In this exercise, we will place objects along a single axis.


To begin this exercise, we should first think about the desired outcome and what variables would be needed to achieve this. For this exercise, we know the result should be objects placed on a single line. Now that we know what we want, lets think of the parameters we would need to consider to build this.

Essentially, we would need to set up how long the line should be (the dimension size, how many objects would we place and the size of the gap between each objects.

this.dim = 20
this.count = 10;

this.segDim = this.dim/(this.count-1);

For the calculation of the gap size, this.segDim, we divide the size of the dimension (this.dim) by the count of objects minus one (this.count-1). The reason for this is because on our line, there will be “this.count-1” amount of gaps.

Now its time to place our objects in a line. For this exercise, we will place the objects on the x axis. In order to do this, we will have to set up a loop that calculates the x position and place an object on that position.

for(let i = 0; i < this.count; i++){
    let x = i * this.segDim;

    let obj = new THREE.Mesh(geometry, material);

    obj.position.set(x, 0, 0);

In the code snippet above, we have a for loop that starts at zero and iterates “this.count” times. We calculate the x position for each object by taking our variable, i, which goes from 0 to “this.count-1” and multiply it by the size of the gap, this.segDim.

Also in the loop, we create our object mesh, set its x position and add to the scene. In this case, the objects will be on single line starting at 0 on the x axis.

If you want the objects to have a centered/symmetrical alignment, then you may try this calculation for x instead:

let x = iX * this.segDimX - this.dimX/2;

See the Pen Grid One D by XR Club (@xrclub) on CodePen.

Leave a Reply

Your email address will not be published.