如何删除二维数组的角索引？

Question

使用 Three.js 研究正向光线追踪算法。刚刚使用二维数组创建了这个示例。请注意，除了解析其位置之外，此处不涉及 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）内的光线。

---

Answer 1

如果您想保持一个谨慎的 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
        }
    }
}

一些建议：

1. 我会使用单个 LineSegments 对象，而不是多个 Line 对象来加快渲染速度（Three.js 在渲染一个具有多个顶点的对象时比渲染多个具有少量顶点的对象更快）。
2. 您可以生成围绕原点（从 -8 到 8）的几何图形，并计算到 (0, 0) 的距离，然后然后用 position.x = 60 将其替换 60 个单位，例如简单。