5. GRID 1D

Overview

In this exercise, we’ll arrange objects along a single axis. We’ll be extending this exercise by adding animation to the cubes.

Grid 1D Codepen: https://codepen.io/xrclub/full/WNMxWQd

Getting Started: https://xr.club/exercise/getting-started/

Level I – Grid 1D

The scene, camera, lighting, and renderer need to be set up beforehand, as in the Getting Started exercise. If you need help remembering how it all works, check that exercise out before starting. Here, we will just focus on creating the grid 1D scene.

Here are the instructions:

1. define grid dimension and octahedron counts 
2. calculate space between octahedrons
3. set up octahedron geometry and material  
4. create an empty octahedrons array 
5. generate octahedrons using a for loop 
6. set new x position and push octahedron into array 

Step 1: define grid dimension and octahedron counts 

Start by considering the necessary parameters to achieve this arrangement, the grid dimension size and the number of octahedrons.

// Set grid dimension
this.gridDimension = 20;
// Set the number of octahedrons in the grid
this.numberOfOctahedrons = 5;  

Step 2: calculate space between octahedrons

Determine the separations between each octahedron, this will be used later to calculate the X position. To achieve this, divide the grid dimension size by the number of objects minus one, this is because there are “number of objects – 1” gaps on a line.

// Calculate space between each octahedron 
this.spaceBetweenOctahedrons = this.gridDimension / (this.numberOfOctahedrons - 1); 

Step 3: set up octahedron geometry and material  

Create geometry and material for the octahedron.

// Create octahedron geometry and material
const octahedronGeometry = new THREE.OctahedronGeometry(1);
const octahedronMaterial = new THREE.MeshPhongMaterial({color:0xffffff, shininess:100});

Step 4: create an empty octahedron array 

Create an empty array to store octahedrons.

// Create an empty array to store octahedrons
this.octahedronArray = [];

Step 5: generate octahedrons using a for loop 

Generate octahedrons using a for loop based on the number of octahedrons defined earlier, use the octahedron geometry and material to make an object mesh. Add the octahedron to scene.

// Loop through each octahedron object
for(let octahedronIndex = 0; octahedronIndex < this.numberOfOctahedrons; octahedronIndex++){
  let octahedron = new THREE.Mesh(octahedronGeometry, octahedronMaterial);
  this.scene.add(octahedron);
}

Step 6: set new x position and store octahedron into array  

For each octahedron index, multiply this value by the spaceBetweenOctahedrons to create the separations. To realign the octahedron position symmetrically relative to the grid’s centre, subtract half the grid’s dimension size to each separation. Lastly, set the new octahedron x position and push the octahedron into the empty array.

// Calculate the x position by multiplying the octahedronIndex with the spaceBetweenOctahedrons. Then centre their positioning by subtracting half the grid dimension for each octahedron.

octahedron.position.x = octahedronIndex * this.spaceBetweenOctahedrons - this.gridDimension/2;
      
this.octahedronArray.push(octahedron);

Result

See the Pen Loops – 1D Line by XR Club (@xrclub) on CodePen.

Level II – Grid 1D – Animated

Next we’ll animate the Grid 1D scene to showcase different transformations.

Add a new time variable

Create a new time variable to store the animation elapsed time.

// Set time to zero
this.time = 0;

Store time elapsed

In the update loop, continuously add dt to time. The accumulated total represents the elapsed time.

update(dt){
    this.time += dt;
    this.renderer.render(this.scene, this.camera);
  }
}

Add animation logic

Obtain the current octahedron by iterating through the octahedron array. Compute the scale factor using the sine function of time and the octahedron’s x positional value. Then, set the scale of the octahedron according to this scale factor. Also, update the octahedron’s y position and rotation about its X-axis using a similar approach. To slow down the rate of rotation, multiply the sine output by 0.05.

// Animate object based on position values 
for(let octahedronIndex = 0; octahedronIndex < this.octahedronArray.length; octahedronIndex++){
  let octahedron = this.octahedronArray[octahedronIndex];
  let scale = Math.sin(this.time + octahedron.position.x);
  octahedron.scale.set(scale, scale, scale);
  octahedron.position.y = Math.sin(this.time + octahedron.position.x);
  octahedron.rotateX(Math.sin( this.time + octahedron.position.x)* 0.05);
}

Result

See the Pen Loops – 1D Line – Ani by XR Club (@xrclub) on CodePen.