Exploring forward ray tracing algorithm using Three.js. I have developed a sample using a 2D array where the Spotlight's location is parsed, but not directly involved.
To create lines of sight, I set:
startPoint = position of SpotLight
endPoint = hardcoded initial value
https://i.sstatic.net/BdU4o.png
Next, I implemented a nested loop (17x17) to generate a ray in each iteration as shown below:
forward_RT(){
//Declare the start and end points of the first ray (startPoint remains constant)
var f_ray_startPoint = new THREE.Vector3(spotLight.position.x, spotLight.position.y, spotLight.position.z);
var f_ray_endPoint = new THREE.Vector3(-490, 0, 495); //Initially hard-coded for ray endPoint
//Define ray materials
var ray_material_red = new THREE.LineBasicMaterial( { color: 0xff0000, opacity: 10} );
var ray_material_yellow = new THREE.LineBasicMaterial( { color: 0xffff00 } );
var ray_material_green = new THREE.LineBasicMaterial( { color: 0x00ff00 } );
//Set up ray geometry
var ray_geometry = new THREE.Geometry();
ray_geometry.vertices.push( f_ray_startPoint );
ray_geometry.vertices.push( f_ray_endPoint );
//Initialize values for 2D array grid
var rows = 17;
var cols = 17;
var rayOffset = 60; //Offset for every X iteration
for(var x=0; x<rows; x++){
for(var z=0; z<cols; z++){
//Create a ray
var f_ray = new THREE.Line(ray_geometry.clone(), ray_material_red);
f_ray.geometry.vertices[1].x = f_ray_endPoint.x;
scene_Main.add(f_ray); //Add ray to the scene
f_ray_endPoint.x += rayOffset; //Increment offset for new rays
if(f_ray_endPoint.x >= 490){
f_ray_endPoint.x -= (cols * rayOffset);
}
}
f_ray_endPoint.z -= rayOffset;
}
}
For those interested in graphics, note that opacity does not function correctly on the material of the Three.Line.
Is there a way to enable transparency for the line?
Main Query
How can I restrict the iteration so that the rays do not extend beyond the edges of the SpotLight circle? Essentially, I want only the rays within the white circle around the SpotLights to be rendered.