买房选楼层怕采光踩坑？我用纯前端写了个 3D 楼盘日照模拟器！☀️买房怕采光不好？我开源了一套纯前端楼盘采光模拟器！基于

大家好，我是 SeanWong17。

对于很多打工人来说，买房是一件人生大事。在选房时，除了地段和户型，**“采光”**绝对是重中之重。特别是遇到高容积率的小区，选错楼层或者楼栋，可能一天都见不到几个小时太阳。

市面上虽然有专业的建筑设计软件可以做日照分析，但对普通人来说门槛太高。于是，我发挥前端程序员的传统艺能——自己动手，丰衣足食！

今天给大家分享一个我最近开源的硬核实用项目：Building Sunlight Simulator（建筑采光模拟工具）。

主打一个轻量级、零依赖！只要你有一张小区的平面规划图，在浏览器里点几下，就能生成 3D 楼盘模型，并根据真实的太阳轨迹算法，模拟出任意城市、任意一天的实时日照阴影！

🔗 GitHub 源码地址：github.com/SeanWong17/… （开源不易，求个 Star ⭐ 鼓励！）

🌍 在线体验 (Live Demo)：点击这里直达

✨ 项目核心痛点与效果展示

这个工具完全是基于 Web 技术（Three.js）实现的纯前端工作流。无需安装庞大的软件，无需后端服务器，拉下代码双击 HTML 就能跑。

不知道怎么建模？没关系。你只需要拿到售楼处或者开发商给的**小区平面图（JPG/PNG）**上传进去。

(👇 建议在这里插入一张在 Editor 界面描绘楼栋轮廓的 GIF 动图或截图)

模型建好后，就到了最关键的采光分析环节。

因为买房数据有时比较私密，这个工具没有任何后端依赖。你的所有图纸、绘制的数据都通过 JSON 格式在本地保存和流转，即使断网也能完美运行，绝对的数据安全。

项目中主要拆分为两个核心页面：editor.html（数据生产，负责 2D 到 3D 的映射）和 index.html（数据消费，负责 3D 渲染和太阳算法）。

技术栈极其精简，核心涉及：

原生 JavaScript + HTML/CSS：搭建编辑工具的 UI 和交互。
Three.js (WebGL)：负责核心的 3D 场景渲染、相机控制和阴影计算。
数学与算法（球面三角学）：这是整个项目的灵魂。为了让阴影绝对真实，阴影的投射完全遵循真实的太阳高度角和方位角公式：
- 太阳高度角 (h): $\sin(h) = \sin(\phi)\sin(\delta) + \cos(\phi)\cos(\delta)\cos(\omega)$
- 太阳方位角 (A): $\cos(A) = (\sin(h)\sin(\phi) - \sin(\delta)) / (\cos(h)\cos(\phi))$
- (注： $\phi$ 为纬度， $\delta$ 为太阳赤纬角， $\omega$ 为时角)

通过以上公式动态计算出当前时间太阳所在的 3D 空间坐标，并控制 Three.js 中的平行光（DirectionalLight）位置，从而投射出物理正确的阴影。

无需 npm install，无需配置 Webpack/Vite：

目前项目在 GitHub 已经有了 300+ Stars，感谢大家的关注。其实当初写这个项目的初衷，也是希望能用自己学到的技术去解决生活中实实在在的问题。

如果你最近刚好有买房选房的打算，或者身边的朋友有这个需求，不妨发给他们试试。如果这个项目对你的 Three.js 学习或购房决策有帮助，请务必去 GitHub 给个 Star ⭐！

🔗 GitHub 地址：SeanWong17/building-sunlight-simulator

如果有任何 bug反馈或者功能建议，欢迎在评论区或 GitHub 提 Issue 交流！我们下个开源项目见！