# threejs 三次贝塞尔曲线CubicBezierCurve3

## 1 用到如下接口

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

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

## 代码

``````let coors=[
[-80, 0, 0],
[-40, 100, 0],
[40, 100, 0],
[80, 0, 0]
]
let vertices=[]
coors.forEach((coor)=>{
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)=>{
})

// 创建精灵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;
}``````