如何删除2D数组的角指数?

问题描述 投票:0回答:1

使用Three.js研究前向光线跟踪算法。刚刚使用2D数组创建了这个示例。请注意,除了解析其位置之外,此处不涉及Spotlight。

所以为了拍摄我宣称的线条:

startPoint = position of SpotLight
endPoint   = hard code for the first value

enter image description here

然后我创建一个嵌套的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)。


javascript for-loop multidimensional-array three.js 2d
1个回答
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个单位,为简单起见。
© www.soinside.com 2019 - 2024. All rights reserved.