Circle of Objects


In this exercise, we will place objects in a circular path.


To begin with this exercise, we should first visualize how we want the outcome to look. We want objects to be placed in an orderly manner similar to our GRID 1D exercise except the object are placed on a circle path. Now that we know what we want, lets think of the parameters we would need to consider to build this.

Firstly, we would a need a variable that stores the amount of objects we want to place; countObj. We would also need to start with a variable for the radius of the circle.

 this.countObj = 20;
 this.radius = 20;

Now its time to place our objects in a circular path. For this exercise, we will use a single loop that runs “countObj” times and we will calculate where to position each object.

To do this we will use sine and cosine which are two basic trigonometric functions which when used together can construct circles. In a nutshell, given an angle (in radians) they will return the correct position of x (cosine) and y (sine) of a point on the edge of a circle at equal radius.

To calculate the angle in radians, we first take the index, i, of the loop and divide it by countObj (total objects). We then take that value and multiply by 2π which is the radian equivalent to 360 degrees.

for(let i=0; i<this.countObj; i++){
      let t = i/this.countObj;
      let alpha = (Math.PI*2)*t;
      let obj = new THREE.Mesh(geometry, material);
      obj.position.set(Math.cos(alpha)* this.radius, Math.sin(alpha)*this.radius,0)

See the Pen Objects in Circle by XR Club (@xrclub) on CodePen.

Leave a Reply

Your email address will not be published.