~~~

three.js中使用requestAnimationFrame来实现动画的渲染，而不使用setInterval实现。requestAnimationFrame告诉浏览器希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。通俗点讲就是该API的调用频率取决于浏览器的刷新率，也就是说浏览器屏幕刷新多少次，它就执行多少次，一般为每秒60次，可以将其理解为专门用来实现动画效果的api，让浏览器流畅的执行动画效果。

​在上篇文章中，我们已经介绍了three.js，并使用vite搭建了three.js的开发环境，实现了第一个3D场景。本文就来继续分享一下three.js的相关知识，通过代码+图文带你快速上手three.js。🔥如果此文对你有帮助的话，欢迎💗关注、👍、⭐✍️评论支持一下博主~

讲到Three.js，就需要先说一下OpenGL和WebGL，OpenGL是一个跨平台的3D/2D的绘图标准，WebGL是一种3D绘图协议，它允许把JavaScript和OpenGL 结合在一起运用，但使用WebGL原生的API来写3D程序非常的复杂，对于前端开发者来说学习成本非常高。Three.js是WebGL的JavaScript 3D库，其对WebGL提供的接口进行了非常好的封装，简化了很多细节，大大降低了学习成本，让开发者能更快速的进行3D场景效果的开发。

大家好，我是南木元元，热衷分享有趣实用的文章。本文来分享一下如何使用three.js绘制风羽。在气象学中，风羽是用于表示风向和风速的符号图标。它们被用于气象地图、天气预报以及其他气象图表中，以传达风的特征和方向。风羽通常由一个圆圈或一个小箭头表示，箭头的方向表示风的方向，箭头的长度或羽毛的数量表示风的速度。单一风羽符号：它由一个圆圈表示风的方向，没有羽毛或箭头来表示风速。这种符号通常用于表示静风或风速较低的情况。简单的羽毛符号：它由一个箭头或一到三个羽毛表示风的方向和风速。

参考依据是威尔逊等将Three.js与Cesium集成的文章，链接地址：https://www.cesium.com/blog/2017/10/23/integrating-cesium-with-threejs/注意，threejs和ceiusm结合会有版本问题，具体可以参考https://blog.youkuaiyun.com/u011540323/article/details/103522075。通过在两个场景中复制cesium的球面坐标系和匹配的数字地球，很容易将两个单独的渲染引擎层整合到一个主场景中。