构建一个带有士兵角色的3D迷宫游戏演示
开发基于网页的3D游戏演示，包含程序生成的迷宫和具有流畅移动与正确朝向的士兵角色。遵循以下技术规格：
库与依赖项：
-Three.js (r128)：通过CDN使用Three.js（例：cdnjs）
-GLTFLoader：通过jsDelivr使用GLTFLoader加载士兵3D模型
-OrbitControls：通过jsDelivr实现相机控制
场景设置：
-创建带有透视摄像机的Three.js场景
-设置覆盖全屏的WebGL渲染器
-包含光照系统（如半球光源和定向光源）
-添加调试覆盖层（HTML元素）实时显示士兵坐标和旋转数据
迷宫生成：
-创建16x16网格迷宫（单元格尺寸4单位）
-外圈单元格固定为墙体
-中心区域（如6-9轴坐标）保留为开放空间
-其余单元格以15%概率随机生成墙体
-使用画布程序生成纹理：
 地面纹理：棕色基调+网格线
 墙体纹理：基础色+随机化图案
墙体与碰撞机制：
-为每个墙体创建匹配尺寸的立方体网格
-为每个墙体计算碰撞边界框
-通过检测士兵位置（使用碰撞半径）与墙体边界框实现碰撞检测
士兵角色与动画：
-通过GLTFLoader从指定URL加载士兵模型
-在迷宫开放区域定位并缩放士兵模型
-设置动画混合器包含至少两种状态：
 闲置动画：无操作时播放
 奔跑动画：移动时触发
 使用渐入渐出效果实现动画平滑过渡
移动与操控：
-实现WASD键盘控制
z轴移动时根据摄像机前向（XZ平面）和左向矢量计算移动方向
-方向修正：通过以下公式确保角色面向移动方向：
 const angle = Math.atan2(moveDirection.x, moveDirection.z);
 soldier.rotation.y = angle + Math.PI; （增加π值对角朝向至关重要）
-更新轨道控制器目标以实现角色屏幕居中
响应式设计：
-处理窗口缩放事件以更新摄像机比例和渲染器尺寸
动画循环：
主动画循环需实现：
 更新动画混合器
 处理角色移动与碰撞检测
 更新调试面板
 持续渲染场景
给我完整的HTML文件

相关标签：