上节加上了飞线动画：
现在可以看出方向了，但不是很好看。
这节我们把这个飞机也画出来：
用 Sprite + 图片来画：
搜索一个图片
点击智能抠图
下载抠好的图：
放 public 目录：
代码里加载下：
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('./plane.jpeg');
const spriteMaterial = new THREE.SpriteMaterial({
map: texture,
color: 'orange',
transparent: true
});
const planeSprite = new THREE.Sprite(spriteMaterial);
planeSprite.scale.set(30,30);
chinaMap.add(planeSprite);
出来了
它的位置应该是和那个橙色的线一样。
同步改下它的位置：
planeSprite.position.copy(arr[0]);
现在位置对了，但是角度不对。
角度应该朝着飞行的方向，也就是 points[0] 看向 point[1] 的方向。
所以这样算：
if (arr.length > 1) {
const currentPoint = arr[0];
const nextPoint = arr[1];
const direction = new THREE.Vector2(
nextPoint.x - currentPoint.x,
nextPoint.y - currentPoint.y
);
const angle = Math.atan2(direction.y, direction.x);
planeSprite.material.rotation = angle - Math.PI / 2;
}两个向量的差值就是方向向量，然后计算这个方向向量的角度用 atan，这是三角函数的知识。
tan(角1) 的值是对边比临边，也就是途中的 a/b
那有了比值，用 atan 就可以求出角度。
因为刚开始是朝上的，所以要再减一个 Math.PI / 2 才可以
试一下：
去掉 line2，改一下颜色：
这样，飞线动画就完成了。
对比下这个效果图：
是一样的。
案例代码上传了小册仓库
总结
这节我们加上了飞机飞线动画。
首先用 Sprite + 透明背景图片画出了飞机，给它同步设置到短线的位置。
然后用 arr[0] 和 arr[1] 的 vector2 的差值计算出了方向向量，再用 atan 计算出了角度。
动画过程中给飞机设置实时计算出的角度就好了。
现在还差落地点的涟漪动画，下节我们继续完善。