弧线用法

这个类型的曲线只有固定的几个点不能增加删除

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( width, height );
    DOMEl.appendChild( renderer.domElement );

    const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 500 );
    camera.position.set( 0, 0, 100 );
    camera.lookAt( 0, 0, 0 );

    const scene = new THREE.Scene();

    //create a blue LineBasicMaterial
    const material = new THREE.LineDashedMaterial({ 
        color: 0xffffff,
        linewidth: 10,
        scale: 1,
        dashSize: 3,
        gapSize: 1,
    });

    new THREE.EllipseCurve(
        0,  0,            // 弧中心点
        10, 5,           // X，与Y的半径
        0,  1 * Math.PI,  // X,Y画出一度数（即，一个圈占比）
        false,            // 正向画或反向画
        0                 // 转动触度
    );
    
    
    const points = curve.getPoints( 50 );
    const geometry = new THREE.BufferGeometry().setFromPoints( points );

    const line = new THREE.Line( geometry, material );

    line.computeLineDistances();


    scene.add( line );
    
    renderer.render( scene, camera );

三维三次贝塞尔曲线

• 这个类型的曲线只有固定的几个点不能增加删除
• 分别为开始点，第一个控制点，第二个控制点，结束点

    const curve = new THREE.CubicBezierCurve3(
        new THREE.Vector3( -10, 0, 0 ),
        new THREE.Vector3( -5, 15, 0 ),
        new THREE.Vector3( 20, 15, 0 ),
        new THREE.Vector3( 10, 0, 0 )
    );

    const points = curve.getPoints( 50 );

平滑的三维样条曲线。

此类曲线能增加任意多个点，并且点之间相互连接

    const curve = new THREE.CatmullRomCurve3( [
        new THREE.Vector3( -10, 0, 10 ),
        new THREE.Vector3( -5, 5, 5 ),
        new THREE.Vector3( 0, 0, 0 ),
        new THREE.Vector3( 5, -5, 5 ),
        new THREE.Vector3( 10, 0, 10 )
    ] );

    const points = curve.getPoints( 50 );