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

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 的 material。

有没有办法增加透明度就行了？

主要问题

如何阻塞迭代使得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
        }
    }
}

几点建议：

我会使用单个 LineSegments 对象，而不是多个 Line 对象以实现更快的渲染（Three.js 渲染具有多个顶点的对象比渲染多个具有少量顶点的对象更快).
您可以围绕原点生成几何图形（从 -8 到 8），并计算到 (0, 0) 的距离，然后然后将其位移 60 个单位position.x = 60，为简单起见。

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

How to remove corner indices of 2D array?

javascript

for-loop

2d

multidimensional-array

three.js