threejs 三次贝塞尔曲线

1 用到如下接口

THREE.CubicBezierCurve3 :创建一个平滑的3d贝塞尔曲线，通过定义起点，终点和两个控制点创建

THREE.Sprite ：创建一个总是朝向摄像机的平面；

2 效果

显示起点、终点和两个控制点的位置；显示被插入点的位置；

起点和终点之间插入10段，获取11个点

 起点和终点之间插入100段，获取101个点

 代码:

 let coors=[
      [-80, 0, 0],
      [-40, 100, 0],
      [40, 100, 0],
      [80, 0, 0]
    ]
    let vertices=[]
    coors.forEach((coor)=>{
      this.scene.add(this.createSpriteShape(coor[0],coor[1],coor[2],10)) 
      vertices.push(new THREE.Vector3(coor[0],coor[1],coor[2]))
    })

    // 创建三次贝赛尔曲线 对象
    var curve = new THREE.CubicBezierCurve3(vertices[0],vertices[1],vertices[2],vertices[3]);
    // 起点和终点之间的插值个数
    var points = curve.getPoints(100); // 返回 10+1个点
    // 添加通过贝塞尔曲线方法插入的精灵 mesh
    points.forEach((point)=>{
      this.scene.add(this.createSpriteShape(point.x,point.y,point.z,2)) 
    })


    // 创建精灵mesh
    createSpriteShape(x,y,z,s){
        let canvas = document.createElement("canvas");
        canvas.width = 520;
        canvas.height = 520;
        let ctx = canvas.getContext("2d");
        ctx.fillStyle = "#ff0000";
        ctx.arc(260,260,260,0,2*Math.PI);
        ctx.fill();
        let texture = new THREE.Texture(canvas);
        texture.needsUpdate = true; 
        let material = new THREE.SpriteMaterial({map:texture});
        let mesh = new THREE.Sprite(material);
        mesh.position.set(x,y,z);
        mesh.scale.set(s,s,s)
        return mesh;
  }