使用Three.js研究前向光线跟踪算法。刚刚使用2D数组创建了这个示例。请注意,除了解析其位置之外,此处不涉及Spotlight。
所以为了拍摄我宣称的线条:
startPoint = position of SpotLight
endPoint = hard code for the first value
然后我创建一个嵌套的for循环(17x17),我用常规方法每次迭代创建一个光线,如下所示:
forward_RT(){
//Declare the start and end points of the first ray (startPoint never changes )
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); //Hard Coding for 1st position of ray endPoint
//Declare material of rays
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 } );
//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 = 17;
var cols = 17;
var rayOffset = 60; //Offset of ray every X iteration
for(var x=0; x<rows; x++){
for(var z=0; z<cols; z++){
//Declare 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 into the scene
f_ray_endPoint.x += rayOffset; //Add offset every new ray
if(f_ray_endPoint.x >= 490){
f_ray_endPoint.x -= (cols * rayOffset);
}
}
f_ray_endPoint.z -= rayOffset;
}
}
对于图形人员,我注意到不透明度不适用于Three.Line的材质。
有没有办法在线上增加透明度?
主要问题
如何阻止迭代,以便不会绘制SpotLight的角落?换句话说,我只想访问白色圆圈内的光线(SpotLights)。
如果你想保持X,Y射线的谨慎网格并丢弃圆圈外的那些,你可以使用built-in method Vector2.distanceTo()
。只需按原样保持循环,但是对圆的中心进行距离计算,如果距离大于半径,则跳到下一个循环:
// Find the center of your circle
var center = new THREE.Vector2(centerX, centerZ);
// Assign radius of your circle
var radius = 17 / 2;
// Temp vector to calculate distance per iteration
var rayEnd = new THREE.Vector2();
// Result of distance
var distance = 0;
for (var x = 0; x < rows; x++) {
for (var z = 0; z < cols; z++) {
// Set this ray's end position
rayEnd.set(x, z);
// Calculate distance to center
distance = rayEnd.distanceTo(center);
// Skip loop if distance to center is bigger than radius
if (distance > radius) {
continue;
} else {
// Draw ray to x, z
}
}
}
一些建议:
Line
对象来更快地渲染(Three.js渲染一个具有许多顶点的对象比具有很少顶点的多个对象更快)。position.x = 60
将其移动60个单位,为简单起见。