园区 3D 沙盘 · 可交互 Demo

个人技术实验 Demo，不作为商用平台，不提供任何对外服务。下面是我自己在浏览器里跑的三维查看器：建筑体块由脚本批量生成、导出 glTF，再由 Three.js 实时渲染，带平行光阴影与色调映射。

初始化中…

操作：左键拖拽旋转，滚轮缩放，右键平移。左下角 HUD 是模型的真实统计信息，不是写死的文案。

这个 Demo 想验证什么

1. 不靠人工建模能不能拿到能看的建筑模型：轮廓 + 高度 + 坡向三个参数，脚本直接生成体块。
2. Web 端能不能扛住整片场地：模型体积压到 1 MB 以内，首屏只加载几何和一张底图，阴影贴图单独调参。
3. 配准误差肉眼可见：模型和影像对齐后，四角顶点直接铺地，不用平面几何去猜朝向。

关键实现片段

用四角顶点铺地面，绕开平面几何的朝向与镜像歧义：

const order = ['sw', 'se', 'ne', 'nw']
const positions = order.flatMap((k) => toScene(meta.corners_local_m[k]))
const geo = new THREE.BufferGeometry()
geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3))
geo.setAttribute('uv', new THREE.Float32BufferAttribute([0, 0, 1, 0, 1, 1, 0, 1], 2))
geo.setIndex([0, 2, 1, 0, 3, 2])
geo.computeVertexNormals()

阴影相机贴合模型范围，否则阴影会糊成一片：

const span = Math.max(size.x, size.z) * 0.9
sun.shadow.camera.left = -span
sun.shadow.camera.right = span
sun.shadow.camera.top = span
sun.shadow.camera.bottom = -span
sun.shadow.camera.near = 1
sun.shadow.camera.far = span * 6
sun.shadow.camera.updateProjectionMatrix()

已知不足

• 体块没有立面细节，窗户、材质分区都还没做。
• 移动端高 DPR 下 4096 阴影贴图偏重，目前是直接把 pixelRatio 压到 2 以内。
• 没有做 LOD，场地再大一档就得改。

想接着往下做的话，下一步是加简易 LOD 和程序化屋顶材质。同一份模型我还写了一个按天生长的版本：体块生长与施工过程动画。

本站所有 3D 孪生场景、可视化系统均为个人技术实验 Demo，仅用于技术学习与效果展示，不属于对外运营平台，不提供任何商业服务。