现代建筑日照交互实验室 (Ultimate 版)

Table of Contents

日照交互实验室技术报告

核心技术栈: HTML5, WebGL, Three.js, Tailwind CSS 项目定位: 建筑环境参数化推敲 Web3D 辅助工具

项目概述

本项目从静态课件重构为高精度 Web3D 沙盘，支持全球真实日照模拟、参数化体块编辑与专业图纸级视觉呈现。

核心技术

一、全球坐标系重构 修复 DOM 挂载异常。引入真实天文学地平坐标系算法（赤纬角/时角转换），解除 0° 纬度限制，实现 60°N 至 60°S 的跨半球精准日照模拟。
二、 3D 包络线升级 将 1px 线条重构为立体发光圆管（TubeGeometry）。通过粗细层级划分与关闭深度写入（depthWrite: false），彻底解决多轨迹重叠导致的 Z-fighting 闪烁与遮挡问题。
三、交互解耦与参数化沙盘 引入底层射线（Raycaster）检测拦截事件，完美解耦拖拽与相机旋转。集成 TransformControls 支持体块新建与拉伸，设置底面绝对吸附（y=0）防止物理穿模。应用黄金角色相算法智能分配体块对比色。
四、尺度对齐与图纸化视觉 重置相机极轴解锁 360° 全视域。构建 1×1 模数网格并开启整数单位操作吸附（Snap），内置 Canvas 矢量指北针。优化镜头推拉策略，在物理尺寸不变的前提下使画面视觉占比放大至 170%，并修复慢速播放卡顿。

核心算法：太阳方位计算

基于地平坐标系，精准兼容南北半球日照映射：

function calcSunPosForTime(time, month, lat) {
    const declination = 23.45 * Math.sin((2 * Math.PI / 365) * (30 * (month - 1) - 81));
    const decRad = declination * (Math.PI / 180);
    const latRad = lat * (Math.PI / 180);
    const hourAngle = (time - 12) * 15 * (Math.PI / 180);

    const xEq = Math.cos(decRad) * Math.cos(hourAngle);
    const yEq = -Math.cos(decRad) * Math.sin(hourAngle);
    const zEq = Math.sin(decRad);

    const xSouth = xEq * Math.sin(latRad) - zEq * Math.cos(latRad);
    const zZenith = xEq * Math.cos(latRad) + zEq * Math.sin(latRad);

    return { x: yEq * R, y: zZenith * R, z: xSouth * R, altitude: Math.asin(zZenith) };
}

日照交互实验室 技术报告

项目概述

核心技术

核心算法：太阳方位计算

总结

日照交互实验室技术报告