企业官网建设流程全解析

第一人称 3D 走进你的新家：floorplan-3d 漫游模式完整指南（桌面 WASD + 手机虚拟摇杆）

【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3d

想还没入住就"走进"新家，亲身感受每个房间的空间尺度吗？floorplan-3d是一款纯前端的户型装修设计工具，它的3D 漫游模式让你以第一人称视角在 2.8 米层高、1:60 真实比例的三室两厅两卫户型里自由走动——桌面端用 WASD + 鼠标，手机/平板用左下虚拟摇杆 + 拖动转向，还能边走边开门。🚶

🚀 快速上手：三步开启 3D 漫游模式

第 1 步 · 获取项目

git clone https://gitcode.com/gh_mirrors/fl/floorplan-3d cd floorplan-3d

第 2 步 · 打开应用

直接用浏览器打开 index.html 即可（无需安装、无构建步骤），也可以起一个本地静态服务器：

python3 -m http.server 8000 # 访问 http://localhost:8000

⚠️ 3D 场景依赖 CDN 加载 Three.js，首次打开需要联网。

第 3 步 · 切换视角

1. 点击顶栏的3D 场景按钮（或按T键）进入 3D 鸟瞰；
2. 再点击顶栏的漫游按钮，画面自动把你放到入户门外，站立高度 1.6 米（代码见 index.html）；
3. 出现"漫游模式"提示卡，点击卡片即可开始（桌面端此时锁定鼠标指针）。

⌨️ 桌面端漫游：WASD + 鼠标按键速查

移动逻辑与视角方向严格对齐（前/后/左/右基于当前朝向计算），实现见 stepWalk 函数；按键监听在 index.html。

🧱走不穿墙：漫游时身体带 0.22 米半径的碰撞判定，墙体与关闭的门都会挡住你，贴墙走时会沿墙平滑滑行而不是卡死，逻辑见 blocked 函数。

📱 手机 / 平板漫游：虚拟摇杆 + 拖动转向

在触屏设备（或浏览器不支持鼠标指针锁定的环境）进入漫游后，界面会自动切换为摇杆模式🕹️：

• 左下虚拟摇杆：控制移动，推得越远走得越快（摇杆绑定见 bindJoystick，外观样式见 index.html）；
• 拖动画面：任意位置按住拖动即可转身环视，松手停止；
• 点门开关：直接点击眼前的门，开关距离 3.5 米内均有效；
• 右下「退出漫游」按钮：一键回到鸟瞰视角。

为什么手机用摇杆？因为 iPad 等触屏不支持 PointerLock 鼠标锁定（初始化逻辑），应用检测到触屏后自动走摇杆方案；即使桌面端指针锁定失败，也会自动降级为摇杆，保证漫游随时可用（降级处理）。

✨ 漫游体验细节：沉浸感是怎么做出来的

• 墙体自动变全高：进入漫游时若处于剖切墙状态，会自动切换回全高墙，避免"穿帮"（setMode）；
• 墙角线 + 踢脚线：漫游时墙面额外渲染棱线和踢脚线，相邻墙面、墙角一眼可分，只在漫游模式显示（建筑构建）；
• 门是"动"的：开门采用逐帧缓动，门板平滑摆动而非瞬间跳转（主循环）；
• 顶部提示条随模式变化：桌面显示"WASD 移动 · 鼠标转向 · Shift 快走 · E 开关门 · Esc 暂停"，触屏显示摇杆提示（提示文案）。

🚪 暂停、退出与返回鸟瞰

💡 新手常见问题（FAQ）

Q：漫游中按不了"剖切墙"按钮？A：漫游模式下剖切墙被禁用，需先退出漫游再切换墙体高度。

Q：方案会丢吗？A：不会。家具、地面材料、拆改记录都自动保存在浏览器 localStorage，关闭页面再打开依然还在。

Q：能换自己的户型吗？A：可以。index.html 中的WALLS/ROOMS/DOORS等数据数组定义了整套户型，替换成自己的尺寸数据即可，详细说明见 README.md。

📚 相关资源

• 完整功能与快捷键表：README.md（漫游快捷键见 README.md）
• 应用全部源码（单文件，约 2700 行）：index.html
• 许可协议（MIT）：LICENSE

【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3d