如何繪製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) 

其中r爲半徑，CX，CY的起源，以及從0角度.2π弧度或0..360度。

和繼承人一些有趣的閱讀材料！
http://en.wikipedia.org/wiki/Circle#Equations

編輯：剛完成這個項目的草稿。 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); 

     }