纯前端实现楼盘采光模拟工具：从 2D 规划图到 3D 日照分析

此外，为了防止手抖导致绘制的多边形产生'毛刺'或重叠点，我在闭合多边形时增加了一个净化算法 (Sanitize)：

// 多边形净化：去重、去共线、去极短边
function sanitizePolygon(rawPoints, epsPx = 0.5) {
    // 1. 去掉首尾重复点
    // 2. 去掉相邻的极近点 (distance < threshold)
    // 3. 核心：去掉近似共线的中间点 (通过叉积计算)
    const result = [];
    const n = rawPoints.length;
    for (let i = 0; i < n; i++) {
        const p0 = rawPoints[mod(i - 1, n)];
        const p1 = rawPoints[i];
        const p2 = rawPoints[mod(i + 1, n)];
        // 计算向量叉积，判断三点是否共线
        const v1x = p1.x - p0.x;
        const v1y = p1.y - p0.y;
        const v2x = p2.x - p1.x;
        const v2y = p2.y - p1.y;
        const cross = Math.abs(v1x * v2y - v1y * v2x);
        if (cross > epsPx * (len1 + len2)) result.push(p1);
    }
    return result;
}

二、3D 可视化：Three.js 与 太阳轨迹计算

1. 从 2D 轮廓生成 3D 楼栋

利用 Three.js 的 ExtrudeGeometry (挤压几何体)，我们可以直接将 2D 的 Shape 拉伸成 3D 模型。

这里有一个细节：为了让模型看起来不像'素模'，我根据 JSON 中的 units (每层户数) 动态生成了 Canvas 纹理贴图，模拟窗户的效果。

// 动态生成外立面纹理
function createFacadeTexture(floors, unitsPerFloor) {
    const canvas = document.createElement('canvas');
    // ... 绘制背景色 ...
    // 根据层数和户数绘制窗户矩形
    for (let f = 0; f < floors; f++) {
        // 简单的 Canvas 2D 绘图操作 ctx.fillStyle ='rgba(255,255,255,0.22)'; ctx.fillRect(x, y, w, h);
    }
    return new THREE.CanvasTexture(canvas);
}

// 生成几何体
const shape = new THREE.Shape();
// ... 解析 JSON 点集 ...
const geometry = new THREE.ExtrudeGeometry(shape, {
    depth: totalHeight, // 挤压深度即楼高
    bevelEnabled: false // 关闭倒角
});

2. 模拟真实日照 (核心算法)

阴影的产生依赖于平行光 (DirectionalLight) 的位置。我们需要根据用户选择的季节和时间，结合地理纬度，算出太阳在天空中的准确位置（高度角和方位角）。

公式实现如下：

function updateSun() {
    const hour = getCurrentHour();
    const decl = parseFloat(seasonSelect.value); // 赤纬角：冬至 -23.44，夏至 23.44
    
    // 1. 计算时角 (Hour Angle)
    const hAngle = (hour - 12) * 15 * rad;
    
    // 2. 计算高度角 (Altitude)
    // sin(h) = sin(φ)sin(δ) + cos(φ)cos(δ)cos(t)
    const sinAlt = Math.sin(lat) * Math.sin(decl) + Math.cos(lat) * Math.cos(decl) * Math.cos(hAngle);
    const alt = Math.asin(sinAlt);
    
    // 3. 计算方位角 (Azimuth)
    // cos(A) = (sin(h)sin(φ) - sin(δ)) / (cos(h)cos(φ))
    const cosAz = (Math.sin(alt) * Math.sin(lat) - Math.sin(decl)) / (Math.cos(alt) * Math.cos(lat));
    let az = Math.acos(Math.min(1, Math.max(-1, cosAz)));
    if (hour >= 12) az = -az;
    
    // 4. 转换为 Three.js 坐标系 (x, y, z)
    // 注意：Three.js 中 Y 轴向上
    const y = dist * Math.sin(alt);
    const r = dist * Math.cos(alt);
    const x = r * Math.sin(az);
    const z = r * Math.cos(az);
    sunLight.position.set(x, y, z);
    
    // 如果太阳在地平线以下，关闭光源强度
    sunLight.intensity = alt > 0 ? 1.2 : 0.0;
}

📂 项目结构与使用

整个项目非常轻量，没有复杂的构建流程（Webpack/Vite），只有 HTML 文件，下载即用。

building-sunlight-simulator/
├── editor.html # 2D 规划图配置器
├── viewer.html # 3D 采光可视化
├── README.md
└── examples/ # 示例文件

使用步骤：

1. 打开 editor.html，导入你的楼盘规划图。
2. 标定比例尺，绘制楼栋，导出 JSON。
3. 打开 viewer.html，导入刚才的 JSON，开始日照分析。

🔮 总结与展望

这个项目展示了前端技术在可视化工具领域的潜力。不依赖后端，仅仅使用 Canvas 和 WebGL 就能解决实际生活中的'痛点'。

未来可以优化的方向：

• 增加户型图叠加功能。
• 引入更精确的地理高程数据。
• 支持 VR 模式看房。

完整的代码我已经上传到 GitHub，如果你对 Canvas 交互或 Three.js 开发感兴趣，欢迎下载体验！

Github 传送门