Как нарисовать 2d дугу

Question

Я пытаюсь ввести некоторые известные значения ACR из другой программы и воспроизводить их в three.js

Прямо сейчас я использую следующий код, который я нашел на этом сайте. Он отлично рисует дугу, хотя это может быть не самый лучший вариант.

function DRAWarc(){ 
      // smooth my curve over this many points 
      var numPoints = 100; 

      spline = new THREE.SplineCurve3([ 
       new THREE.Vector3(0, 0, 0), 
       new THREE.Vector3(0, 200, 0), 
       new THREE.Vector3(150, 150, 0) 
      ]); 

      var material = new THREE.LineBasicMaterial({ 
       color: 0xff00f0, 
      }); 

      var geometry = new THREE.Geometry(); 
      var splinePoints = spline.getPoints(numPoints); 

      for(var i = 0; i < splinePoints.length; i++){ 
       geometry.vertices.push(splinePoints[i]); 
      } 

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

     } 

Ниже перечислены известные переменные.

Центральная точка (X, Y) (если Аре был полный круг, центр окружности)
радиус (если он был круг)
начальный угол (я не уверен, но я думаю, это степень, если бы это был круг, идущий против часовой стрелки, причем 0 находился справа от круга)
Конечный угол (см. выше)

еще код!

  /////////// 
    // SCENE // 
    /////////// 
    scene = new THREE.Scene(); 

    //////////// 
    // CAMERA // 
    //////////// 

    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight; 

    viewsize = 900; 
    camera = new THREE.OrthographicCamera(
     SCREEN_WIDTH/- 2, SCREEN_WIDTH/2, 
     SCREEN_HEIGHT/2, SCREEN_HEIGHT/- 2, 
     1, 1e6); 
camera.position.z = 2000; 

    scene.add(camera); 


    camera.lookAt(new THREE.Vector3(2100, 3600, 0)); 

    ////////////// 
    // RENDERER // 
    ////////////// 

    // create and start the renderer 
    if (Detector.webgl){ 
     renderer = new THREE.WebGLRenderer(); 
     //alert('no problem.'); 
    }else{ 
     renderer = new THREE.CanvasRenderer(); 
     alert('problem.'); 
    } 
    renderer.setClearColor("white", 1); 
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); 


    container = document.body; 

    container.appendChild(renderer.domElement); 

    //////////// 
    // EVENTS // 
    //////////// 

    // automatically resize renderer 
    THREEx.WindowResize(renderer, camera); 
    // toggle full-screen on given key press 
    THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) }); 

    /////////// 
    // STATS // 
    /////////// 

    // displays current and past frames per second attained by scene 
    stats = new Stats(); 
    stats.domElement.style.position = 'absolute'; 
    stats.domElement.style.bottom = '0px'; 
    stats.domElement.style.zIndex = 100; 
    container.appendChild(stats.domElement); 

    /////////// 
    // LIGHT // 
    /////////// 

    // create a light 
    var light = new THREE.PointLight(0xffffff); 
    light.position.set(0,250,0); 
    scene.add(light); 
    var ambientLight = new THREE.AmbientLight(0x111111); 
    // scene.add(ambientLight); 

    ////////////// 
    // GEOMETRY // 
    ////////////// 

    // most objects displayed are a "mesh": 
    // a collection of points ("geometry") and 
    // a set of surface parameters ("material") 

    doWork(); 


} 
function animate() 
{ 
    requestAnimationFrame(animate); 
    render();  
    update(); 
} 

function update() 
{ 
    // delta = change in time since last call (in seconds) 
    var delta = clock.getDelta(); 

    // functionality provided by THREEx.KeyboardState.js 
    if (keyboard.pressed("1")) 
     document.getElementById('message').innerHTML = ' Have a nice day! - 1'; 
    if (keyboard.pressed("2")) 
     document.getElementById('message').innerHTML = ' Have a nice day! - 2 ';  

    //controls.update(); 
    stats.update(); 
} 

function render() 
{     
    renderer.render(scene, camera); 
}` 

Answer 1

Вы можете нарисовать дугу с геометрией окружности

// compute angle between p1 and p2 
var angle = Math.acos(p1.dot(p2)/(p1.length()*p2.length())); 
// create arc 
var geometry = new THREE.CircleGeometry(radius, nbSegments, 0, angle); 
// remove center vertex 
geometry.vertices.splice(0,1); 
// TODO: move the arc to the good place in the scene 
// add arc to the scene 
scene.add(new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0xff00f0 })); 

Answer 2

Итак, после небольшого исследования я нашел следующее сообщение.

How do I calculate a point on a circle’s circumference?

который привел меня к этому немного математики, которая может быть адаптирована к любому языку:

x = cx + r * cos(a) 
y = cy + r * sin(a) 

где г радиус, Cx, Cy происхождение, а угол от 0 ..2PI радиан или 0..360 градусов.

и heres некоторые интересные материалы для чтения!
http://en.wikipedia.org/wiki/Circle#Equations

EDIT: только что закончил черновик для этого проекта. Enjoi!

Я не рисую сплайн, вместо этого он рисует линию с 102 точками. начало дуги, конец и 100 равномерно расположенных точек между ними. он работает хорошо, и я добавлю переменную в число строк, чтобы уменьшить объем памяти, если это необходимо.

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 cx = '2473.5737'; 
      var cy = '3145.1300'; 
      var ra = '47.5538'; 
      var sa = '2'; 
      var ea = '91'; 

      var material = new THREE.LineBasicMaterial({ 
       color: 0xff00f0, 
      }); 

      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; 

       for(var i=1;i<=100;i++){ 
        var t = getARC(cx, cy, ra, (+sa + (+step * +i))); 
        geometry.vertices.push(new THREE.Vector3(t['x'], t['y'], 0)); 
        //alert((+sa + (+step * +i))); 
       } 

       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); 

     }