请使用 React、TypeScript、Three.js、React Three Fiber 及相关库，搭建一个可实际游玩的第一人称 3D 恐怖探索游戏 Demo。 不是静态展示页，不是全景图片浏览器，也不是只有场景没有交互的模型展厅。 ## 1. 游戏定位 - 游戏名称：《雨夜纸人》。 - 当前只制作第一章，为后续多个章节预留扩展能力。 - 背景：20 世纪 90 年代，香港旧式唐楼，深夜暴雨。 - 场景为旧楼其中一层，默认设定在三楼，布局包含一条长走廊及侧边房间。 - 玩家出生在房间内，可以开门进入走廊探索，再返回房间。 - 玩法以观察、探索、调查及事件触发为主，暂不加入战斗、复杂背包和任务系统。 - 恐怖感来自环境异常、空间音效、视线变化和叙事铺垫，而不是连续跳脸。 ## 2. 技术栈 - React + TypeScript + Vite。 - Three.js + @react-three/fiber + @react-three/drei。 - @react-three/rapier：角色和场景碰撞。 - Zustand：游戏状态、设置、加载状态管理。 - Tailwind CSS + shadcn/ui + Less：游戏界面。 - lucide-react：图标。 - Motion：菜单、设置和界面的克制动画。 - 根据实际需要使用后处理，不为了效果堆叠依赖。 场景渲染、玩家控制、剧情事件、资源加载和 UI 应有明确边界。不要把整个游戏写在一个巨型组件里，也不要每帧通过 React 状态更新角色位置。 ## 3. 整体视觉风格 目标是写实、潮湿、陈旧的港式民俗恐怖风格。 - 色调以脏灰、深棕、暗红为主。 - 室内昏黄暖光与窗外冷蓝雨夜形成对比。 - 材质包含墙皮脱落、霉斑、渗水、木材磨损、金属锈蚀和积水痕迹。 - 环境要有生活痕迹和年代感，避免像刚摆好的空房间。 - 室内与走廊保持一致的美术完成度，不能外面写实、出生房间却像方块样板间。 - 不要用过曝、强 Bloom 或整屏漆黑掩盖建模问题，玩家必须能辨认道路和交互目标。 ## 4. 走廊场景 制作一条狭长、具有纵深感的旧楼走廊： - 一侧为住户房门、门牌、墙面告示和杂物。 - 另一侧为铁窗或半开放栏杆，可以看到楼外密集的旧楼。 - 墙面有老旧瓷砖墙裙、破损水泥、潮湿霉斑。 - 天花有裸露电线、水管、横梁和旧灯具。 - 地面有局部湿润反光，不能整条走廊像镜子。 - 配置昏黄灯、局部红灯、封条、抓痕、手印、寻人启事和供台。 - 远端保留昏暗转角或楼梯入口，形成探索方向和空间压迫感。 窗外表现： - 密集唐楼立面、铁窗、空调、晾衣架、管线及零星亮窗。 - 暴雨、远处雷电和冷色天空。 - 近处可接近的构件使用真实几何；远景可以使用低模、实例化和背景贴图组合。 - 不需要制作整座可进入的城市。 ## 5. 出生房间 房间是一间带有旧式婚房元素的卧室，包含： - 深色老木床：床头板、床尾板、床腿及床下空间。 - 暗红锦缎床品、两个枕头、有体积和褶皱的被子。 - 老木梳妆台：抽屉、把手、凳子、小物件。 - 发乌的弧形梳妆镜。 - 红漆嫁妆箱、铜锁、磨损金属包角。 - 墙上悬挂的旧嫁衣。 - 囍字、旧画、纸张和少量民俗装饰。 - 油灯或旧灯笼、木梁天花及冷光铁窗。 - 角落站着一个穿旧式婚服的纸扎新娘。 家具位置要合理，保证从出生点到房门、梳妆台和调查物品之间可以正常行走，不穿墙、不穿家具。 ### 纸扎新娘的特别要求 必须是真正的立体 3D 模型，不能把人物照片贴在平面上，也不能把图片轮廓挤出一点厚度来冒充人物。 需要具有： - 完整头部、鼻梁、鼻尖、下巴和侧脸轮廓。 - 有厚度的躯干、肩部、袖子、手掌和手指。 - 完整裙身、鞋子、背面、发髻和头饰。 - 头饰与身体结构真实连接，不能悬空。 - 贴图只负责面部绘制和服装纹样，不代替身体结构。 - 可以是低模静态纸扎道具，不要求骨骼动画，但近距离从正面、侧面、背面观察都应成立。 ## 6. 第一人称操作 桌面端： - WASD 移动。 - 鼠标控制视角，进入游戏后启用指针锁定。 - 中央显示小型准星。 - 接近并看向物品时显示交互提示。 - E 键交互，包括开门、查看线索和触发调查。 - 手电筒默认关闭，通过 L 键或界面按钮切换。 - Esc 释放鼠标，提供继续游戏和设置入口。 - 玩家具有合理高度及碰撞体，移动不能穿过门、墙和家具。 交互判断同时考虑距离、朝向和可达性，不能隔墙调查，也不能在菜单中误触发剧情。 ## 7. 第一章剧情与恐怖事件 实现以下可体验的事件链： 1. 玩家在婚房醒来，房间暂时安静，门外偶尔传来纸张摩擦声。 2. 玩家打开房门进入走廊，远端纸人伴随雷电短暂出现，随后消失。 3. 继续向前探索，纸人在更近的位置出现，伴随红灯闪烁和异响。 4. 玩家返回房间，发现原本没有的小纸人出现在椅子上。 5. 靠近小纸人后，房间灯光熄灭，窗边出现人影或纸人，伴随雷电及恐怖音效。 6. 事件结束后显示第一章结束界面。 同时增加一条可选调查支线： - 阅读寻人启事，得知某间房已经空置多年，并得到“听到第三声，不要回头”的提示。 - 查看贴有封条和抓痕的房门。 - 玩家敲门三次，稍后听到三次回应，但回应来自窗外。 - 红灯闪烁，窗上出现手印或人影。 - 异常暂时消退，玩家可以前往供台点香。 房间内的嫁妆箱、嫁衣、梳妆镜也可以调查，通过简短文字和音效提供不安感，不强制打断主线。 所有事件需要有明确的状态和触发顺序： - 一次性事件不能反复触发。 - 重复调查不能叠加大量声音和定时器。 - 退出、重开或切换章节时清理事件监听和定时器。 - 普通调查提示不能覆盖关键剧情演出。 - 不要随机播放惊吓，让事件与玩家行为形成关联。 ## 8. 音效设计 - 持续的雨声、远处雷声和低强度环境底噪。 - 门轴、电流、纸张摩擦、敲门、呼吸、点火及关键惊吓音效。 - 重要声音具有空间位置，玩家转头时能感知声源方向。 - 通过声源位置变化制造异常，例如门内的回应实际来自窗外。 - 不要自动播放高音量尖叫。 - 遵循浏览器音频限制，在用户点击进入游戏后解锁音频。 - 支持总音量、环境音量、效果音量和静音设置。 ## 9. 加载页、入口与设置 流程必须明确： 独立加载页面 → 加载完成 → “进入游戏”页面 → 点击后开始游玩。 ### 加载页面 - 使用一个统一的总进度条，不能每加载一张贴图就重新显示一次 100%。 - 进度保持单调递增，重复或缓存资源不能重复计数。 - 只有必要资源、模型解析和场景初始化完成后才达到 100%。 - 显示章节名称、简短氛围文案和加载状态。 - 必要资源失败时显示清晰错误及重试入口。 - 后续按需加载不能让已经完成的启动进度重新倒退。 - 加载器可以复用于后续章节，不写死在第一章场景内。 ### 进入游戏页面 - 展示《雨夜纸人》、第一章信息、进入游戏按钮和设置按钮。 - 提示建议佩戴耳机、手电筒默认关闭。 - 页面具有恐怖游戏的视觉气质，避免普通后台管理系统风格。 ### 设置页面 - 默认只显示一个设置按钮，点击后打开设置面板。 - 支持低、中、高、极高画质。 - 支持音量和静音设置，并保存用户偏好。 - 调整画质、打开设置不能重置剧情。 - 打开设置时隔离游戏输入，避免调音量时角色仍在移动。 - 使用 shadcn/ui 组件、Lucide 图标及适量 Motion 动画，尊重减少动态效果的系统偏好。 ## 10. 移动端适配 手机端必须可玩，并以横屏体验为主。 - 左侧虚拟摇杆移动，右侧滑动控制视角。 - 支持同时移动和转动视角的多点触控。 - 右下角保留交互按钮，同时支持轻点中央准星进行交互。 - 中央区域拖动应转动视角，不能误判为点击交互。 - 长按、滑动、触摸取消和多指操作不得误触。 - 提供手电筒按钮和设置按钮。 - 适配刘海、安全区、不同屏幕比例和横竖屏切换。 - 游戏区域禁止双指缩放、双击放大及页面滚动；iPhone 需要必要的 JavaScript 手势处理，不能只依赖 viewport。 - 限制游戏手势时不能破坏设置面板的滑块和正常 UI 操作。 如果系统锁定竖屏、浏览器不允许强制横屏： - 不要假装代码能够修改 iPhone 的系统旋转锁。 - 提供页面内部旋转 90 度的虚拟横屏方案。 - 同步转换摇杆、视角拖动、点击和弹窗的坐标。 - 页面旋转不能仅旋转画面而留下错误的触摸方向。 ## 11. 素材和性能 可以生成贴图及素材，也可以使用来源明确、许可允许的模型。 - 墙体、家具、纸人等主要物体具有真实几何体。 - 裂纹、污迹、告示、符纸等表面细节适合使用贴图或 Decal。 - 可绕行、可近看的核心道具不能全部用平面图片替代。 - 材质应有合理 UV、纹理比例和粗糙度，避免明显拉伸、接缝及机械重复。 - 不要把概念效果图当作已经实现的游戏画面。 特别关注 Windows 普通电脑和手机性能： - 根据区域、章节和画质按需加载，不要启动时下载未来所有章节。 - 当前出生区域的必要资源应提前准备，避免玩家进入后大量物体突然出现。 - 限制像素比、阴影分辨率、动态光源和后处理开销。 - 实时平面反射只允许高配置按需启用，默认不要开启。 - 重复物体实例化，静态物体合理合批，共享几何和材质。 - 控制透明层叠加、雨滴数量、材质数量和贴图尺寸。 - 模型优先使用适合 Web 的 GLB，避免不必要的外部解码器或 CDN 依赖。 - 切换场景时正确处理资源生命周期，避免内存泄漏或误释放共享资源。 - 先区分网络加载慢、模型解析慢和运行帧率低，不要认为“按需加载”可以解决所有 GPU 开销。 Drei 支持的环境加载与预过滤流程，让材质获得合理的环境反射。 HDRI 只提供低强度冷色环境光；室内灯笼、油灯和走廊灯仍负责主要照明。 保留粗糙度差异：潮湿地面、锈蚀金属和旧木材不能呈现相同反射效果。 不要用高亮环境图把恐怖场景照成白天，也不要靠强反射掩盖材质问题。 加载与性能： 移动端优先使用 1K 环境资源，桌面默认 2K；更高分辨率仅在必要时按画质加载。 环境贴图和预过滤结果复用，不得每帧重新生成。 首屏必要的环境资源纳入统一加载流程；后续高清升级不重置启动进度。 加载失败时提供低成本背景和基础照明降级方案，不能导致游戏无法进入。 交付环境资源、生成提示词、接入代码及分辨率和体积说明；未验证的实际效果明确注明。 ## 12. 交付与验收 交付内容： - 可以本地启动、实际游玩的完整项目。 - 第一章场景、事件、交互、加载页、设置和移动端控制。 - 实际使用的贴图、模型，以及可维护的资源目录。 - 必要的源码说明、构建命令和部署说明。 验收重点： - 出生房间与走廊的视觉完成度一致。 - 纸人从侧面看是真正的立体人物，不是立牌。 - 第一人称移动、门、碰撞、调查和章节结尾可以形成完整流程。 - 手电筒初始关闭。 - 启动只有一个总加载进度，完成后才出现进入游戏页面。 - 设置不污染游戏状态，手机操作不会互相抢夺触摸。 - 无明显穿模、悬空道具、材质拉伸和过曝。 - 对实际帧率和设备兼容性提供测试依据，未验证的内容明确说明。 请先确认场景布局、美术方向和资源预算，再分阶段实现。优先把第一章做完整，不要提前扩展战斗、多层随机地图、复杂 Agent 或其他与本 Demo 无关的系统。 未经我明确同意，不要操作浏览器、控制桌面或自动部署服务器。
