https://blog.qife122.com/tags/%E5%A4%A9%E6%B0%94%E5%BA%94%E7%94%A8/ Recent content in 天气应用 on 办公AI智能小助手 Hugo zh-cn qife Tue, 07 Oct 2025 18:19:56 +0800 https://blog.qife122.com/p/%E4%BD%BF%E7%94%A8react-three-fiber%E5%88%9B%E5%BB%BA%E6%B2%89%E6%B5%B8%E5%BC%8F3d%E5%A4%A9%E6%B0%94%E5%8F%AF%E8%A7%86%E5%8C%96/ Tue, 07 Oct 2025 18:19:56 +0800 https://blog.qife122.com/p/%E4%BD%BF%E7%94%A8react-three-fiber%E5%88%9B%E5%BB%BA%E6%B2%89%E6%B5%B8%E5%BC%8F3d%E5%A4%A9%E6%B0%94%E5%8F%AF%E8%A7%86%E5%8C%96/ <h1 id="使用react-three-fiber创建沉浸式3d天气可视化">使用React Three Fiber创建沉浸式3D天气可视化</h1> <h2 id="技术栈">技术栈</h2> <p>我们的天气世界建立在我最喜欢的技术基础上：</p> <ul> <li>React Three Fiber：Three.js的React渲染器</li> <li>@react-three/drei：包含云层、天空和星星等必备助手</li> <li>R3F-Ultimate-Lens-Flare：Anderson Mancini开发的镜头光晕系统</li> <li>WeatherAPI.com：实时气象数据</li> </ul> <h2 id="天气组件">天气组件</h2> <p>我们可视化的核心在于根据天气API结果条件性地显示逼真的太阳、月亮和/或云层，模拟雨或雪的粒子，昼夜逻辑，以及雷暴期间的一些有趣灯光效果。</p> https://blog.qife122.com/p/%E4%BD%BF%E7%94%A8react-three-fiber%E5%88%9B%E5%BB%BA%E6%B2%89%E6%B5%B8%E5%BC%8F3d%E5%A4%A9%E6%B0%94%E5%8F%AF%E8%A7%86%E5%8C%96/ Mon, 29 Sep 2025 12:55:45 +0800 https://blog.qife122.com/p/%E4%BD%BF%E7%94%A8react-three-fiber%E5%88%9B%E5%BB%BA%E6%B2%89%E6%B5%B8%E5%BC%8F3d%E5%A4%A9%E6%B0%94%E5%8F%AF%E8%A7%86%E5%8C%96/ <h1 id="使用react-three-fiber创建沉浸式3d天气可视化">使用React Three Fiber创建沉浸式3D天气可视化</h1> <h2 id="技术栈">技术栈</h2> <p>我们的天气世界建立在我最喜欢的技术基础上：</p> <ul> <li>React Three Fiber：Three.js的React渲染器</li> <li>@react-three/drei：包含云层、天空、星星等必备助手</li> <li>R3F-Ultimate-Lens-Flare：Anderson Mancini开发的镜头光晕系统</li> <li>WeatherAPI.com：实时气象数据</li> </ul> <h2 id="天气组件">天气组件</h2> <p>可视化的核心在于根据天气API返回的城市天气结果，有条件地显示逼真的太阳、月亮和/或云层，模拟雨或雪的粒子，日夜逻辑，以及在雷暴期间的一些有趣的灯光效果。</p> https://blog.qife122.com/p/%E4%BD%BF%E7%94%A8react-three-fiber%E5%88%9B%E5%BB%BA%E6%B2%89%E6%B5%B8%E5%BC%8F3d%E5%A4%A9%E6%B0%94%E5%8F%AF%E8%A7%86%E5%8C%96%E5%BA%94%E7%94%A8/ Sun, 28 Sep 2025 01:39:55 +0800 https://blog.qife122.com/p/%E4%BD%BF%E7%94%A8react-three-fiber%E5%88%9B%E5%BB%BA%E6%B2%89%E6%B5%B8%E5%BC%8F3d%E5%A4%A9%E6%B0%94%E5%8F%AF%E8%A7%86%E5%8C%96%E5%BA%94%E7%94%A8/ <h1 id="使用react-three-fiber创建沉浸式3d天气可视化应用">使用React Three Fiber创建沉浸式3D天气可视化应用</h1> <h2 id="技术栈">技术栈</h2> <p>我们的天气世界建立在以下核心技术之上：</p> <ul> <li><strong>React Three Fiber</strong>: Three.js的React渲染器</li> <li><strong>@react-three/drei</strong>: 提供云层、天空、星星等必备组件</li> <li><strong>R3F-Ultimate-Lens-Flare</strong>: Anderson Mancini开发的镜头光晕系统</li> <li><strong>WeatherAPI.com</strong>: 实时气象数据接口</li> </ul> <h2 id="天气组件实现">天气组件实现</h2> <h3 id="太阳和月亮组件">太阳和月亮组件</h3> <p>通过纹理贴图球体实现太阳和月亮效果：</p> https://blog.qife122.com/p/%E5%BC%80%E5%8F%91%E8%80%85%E8%A7%86%E8%A7%92%E5%A6%82%E4%BD%95%E7%9C%9F%E6%AD%A3%E8%AF%BB%E6%87%82%E5%A4%A9%E6%B0%94%E9%9B%B7%E8%BE%BE%E6%95%B0%E6%8D%AE/ Fri, 19 Sep 2025 13:58:22 +0800 https://blog.qife122.com/p/%E5%BC%80%E5%8F%91%E8%80%85%E8%A7%86%E8%A7%92%E5%A6%82%E4%BD%95%E7%9C%9F%E6%AD%A3%E8%AF%BB%E6%87%82%E5%A4%A9%E6%B0%94%E9%9B%B7%E8%BE%BE%E6%95%B0%E6%8D%AE/ <h1 id="如何真正读懂天气雷达开发者视角">如何真正读懂天气雷达（开发者视角）</h1> <p>你可能用过天气应用，甚至开发过一款。但你真的知道雷达地图在告诉你什么——或对你隐藏什么吗？</p> <p>作为 Rain Viewer 的开发者兼创始人，我过去十年一直在解析雷达数据流、过滤噪声，并将混乱的大气数据转化为人类和 API 可读的形式。如果你正在开发涉及地理定位、物流、无人机或依赖天气的自动化系统，理解雷达不仅仅是出于好奇——它是基础。</p>