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..2PI弧度或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);

        }

如何绘制2d弧

2 个答案: