Hi all, I’m struggling over a month now to figure out how to simultaneously animate multiple lines (Ray Tracing Animation). So I’m trying to shoot lines from a start point (0,500,0) and create a pyramid of lines using a nested for loop. The problem is that I add all the frames in the scene, instead of animating them.

I used several examples I found online such as increasing fraction/geometry.dashSize and more but its all confusing for me.

A demo is shown in this link.

And the code I use is below:

```
FRT: function() {
return {
forward_RT: function(){
//Get the position of the spotLight
var spotLightPosition = new THREE.Vector3(spotLight.position.x, spotLight.position.y, spotLight.position.z);
var f_ray_endPoint_FIRST = new THREE.Vector3(-490, 0, 495);
//Declare the start and end points of the first ray (startPoint never changes )
var f_ray_startPoint = spotLightPosition;
var f_ray_endPoint = f_ray_endPoint_FIRST;
//Declare ray geometry
var ray_geometry = new THREE.Geometry();
ray_geometry.vertices.push( f_ray_startPoint );
ray_geometry.vertices.push( f_ray_endPoint );
//Declare values for 2d array grid
var rows = 18; //Number of rows
var cols = 18; //Number of columns
var rayCounter = 0; //Counts the number of fowrward Rays
var rayOffset = 55; //Offset of ray every iteration
/* FOR EVERY ROW IN THE 2D ARRAY */
for(var x=0; x<rows; x++){
//Create a 2D Array every row
f_Ray_List[x] = [];
forward_rays_distances[x] = [];
/* FOR EVERY COLUMN IN THE 2D ARRAY */
for(var z=0; z<cols; z++){
//Reposition or add offset for every iteration
if(f_ray_endPoint.x >= 500){
//Reposition 1st index of [i][j]
f_ray_endPoint.x -= (cols * rayOffset);
}
else {
//Add offset every iteration
f_ray_endPoint.x += rayOffset;
}
//Decalere a new Line Object
var f_ray = new THREE.Line(ray_geometry.clone(), ray_material_red);
f_ray.geometry.vertices[1].x = f_ray_endPoint.x;
f_ray.geometry.vertices[1].y = f_ray_endPoint.y;
f_ray.geometry.vertices[1].z = f_ray_endPoint.z;
f_ray.material.dashSize = 0.01;
console.log(f_ray);
//Calculate distance of ray's end Position from the center
rayStart.set(f_ray_startPoint.x, f_ray_startPoint.z);
rayEnd.set(f_ray_endPoint.x, f_ray_endPoint.z);
distanceFromCenter = rayEnd.distanceTo(rayStart);// Calculate distance to center
// Skip loop if distance to center is bigger than radius
if (distanceFromCenter > spotLight_Radius) {
f_ray.material = ray_material_black;
f_Ray_List[x][z] = f_ray; //Add in 2D Array
scene_Main.add(f_Ray_List[x][z]);
} else {
// Draw ray to x, z
f_Ray_List[x][z] = f_ray; //Add in 2D Array
scene_Main.add(f_Ray_List[x][z]);
}
rayCounter++; //Counts how many rays
}
//Add Ofset on Y Axis every row itteration
f_ray_endPoint.z -= rayOffset; //Add offset for ray position on Y Axis
}
}
};
}
```

So my question is, what is the best way to animate the lines since I have the start and end points:

- rayStart = (f_ray_startPoint.x, f_ray_startPoint.z)
- rayEnd = (f_ray_endPoint.x, f_ray_endPoint.z)

It’s good to mention that I want to access all the values because I then want to make the rays bounce from the camera and MAYBE end up in the camera. If you have any suggestions for rays bouncing please let me know and thanks for your time.