在three.js中处理角度数学

时间:2014-01-20 12:56:11

标签: javascript math three.js webgl

我通过制作102行(起点,终点和100个曲线点)绘制一堆弧线

当弧的起点值大于终点时,会出现问题。例如:

起点:359
终点:88

在以下示例中,弧应位于圆的空白区域 http://jsfiddle.net/XsjgH/1/

我尝试了很多东西。例如,

            function getARC(x, y, r, a){
    a = a * (Math.PI/180);
    var ax = +x + +r * Math.cos(+a),
        ay = +y + +r * Math.sin(+a),
        res = [];
        res['x'] = ax,
        res['y'] = ay;

    return res; 
}
function DRAWarc(cx, cy, ra, sa, ea){
        var arcFactor = 1;
            if(+sa > +ea){
                arcFactor = -1;
                var material = new THREE.LineBasicMaterial({
                    color: 0xff00f0,
                });
            }else{
                var material = new THREE.LineBasicMaterial({
                    color: 0x0000ff,
                });
            }


            var geometry = new THREE.Geometry();

                var s = getARC(cx, cy, ra, sa);
                geometry.vertices.push(new THREE.Vector3(s['x'], s['y'], 0));

                var step = (+ea - +sa)/100;
                var pass = 0;
                var reset = 0;
                for(var i=1;i<=100;i++){
                    if(+sa > +ea && ((+sa + (+step * +i))*arcFactor) < 360 && reset == 0){
                        pass = 1;
                    }
                    if(((+sa + (+step * +i))*arcFactor) < sa){
                        reset = 1;
                        pass = 0;
                    }
                    if(((+sa + (+step * +i))*arcFactor) < ea || pass == 1){
                        var t = getARC(cx, cy, ra, ((+sa + (+step * +i))*arcFactor));
                        geometry.vertices.push(new THREE.Vector3(t['x'], t['y'], 0));
                        //alert((+sa + (+step * +i)));
                    }
                }
                reset = 0;
                var f = getARC(cx, cy, ra, ea);
                geometry.vertices.push(new THREE.Vector3(f['x'], f['y'], 0));

            var line = new THREE.Line(geometry, material);
            scene.add(line);

        }

1 个答案:

答案 0 :(得分:0)

所以我想我想出来了。

我添加了这段代码,用于计算弧线上的点之间的“步长”,当它出现问题时。基本上它使起始角度为零然后计算步骤。

我认为问题在于我有一个消极的步骤。

              var step;
                    if(sa > ea){
                        var offset = 360 - sa;
                        step = (+ea + offset)/100;
                    } else {
                        step = (+ea - +sa)/100;
                    }

并继承小提琴:http://jsfiddle.net/475Ga/

编辑:(sa&gt; ea)正在比较字符串的长度,因此在每个变量之前添加一个+来修复它。