3D城市设计

请创建一个纯前端的3D城市Web页面，使用Three.js实现。要求包含以下元素：
1. **场景结构**：
   - 城市布局：网格状街道系统，划分出多个街区
   - 地形：平坦地面覆盖草地，中心区域有湖泊，四周分布公园

2. **核心元素**：
   - **楼房**：随机高度的灰色立方体建筑（20-50个），带窗户纹理
   - **街道**：黑色沥青路面，带黄色车道线
   - **汽车**：红/蓝/白三色车辆（5-8辆），沿道路自动循环移动
   - **行人**：简化人形模型（10-15个），在人行道上随机行走
   - **公园**：草坪区域，内有长椅和树木
   - **湖泊**：蓝色水面，带波纹动画效果
   - **树木**：棕树干+绿色树冠（30+棵），随机分布在公园和街道旁
   - **草地**：浅绿色地面纹理，覆盖非道路区域

3. **交互功能**：
   - 鼠标拖拽旋转视角
   - 滚轮缩放场景
   - 点击汽车/行人显示标签（如"车辆#1"、"行人A"）

4. **技术要求**：
   - 使用Three.js
   - 响应式设计（适配不同屏幕）
   - 添加环境光+方向光
   - 汽车和行人需有简单移动动画
   - 湖泊需有动态水面效果
   - 所有代码封装在单个HTML文件中

5. **性能优化**：
   - 对重复物体使用InstancedMesh
   - 设置合理的LOD（细节层次）
   - 添加基础阴影效果

请生成完整的HTML代码，包含内联CSS和JavaScript，确保可直接在浏览器运行。