伪3D房间中的L型活动面实现

在一个CSS 3D透视房间里，如何让角色在墙面和地面之间自然移动，形成连续的L型活动路径？

问题背景

我们有一个用CSS 3D变换构建的虚拟房间，角色可以在其中自由移动。但这里有个问题：

• 墙面（垂直平面）：角色可以上下爬墙
• 地面（水平平面）：角色可以前后左右行走

这两个平面在墙脚处相交，但传统的坐标处理会让角色在墙脚处出现跳变——要么突然从墙面跳到地面，要么坐标计算错误导致位置偏移。

我们需要一个连续的L型活动面，让角色从墙面爬到墙脚，再无缝过渡到地面行走，反之亦然。

核心思路

1. 理解坐标系

首先，我们需要理解房间的坐标系：

房间坐标系 (x, y, z):
├── x: 左右位置 (-900 到 900)
├── y: 上下位置 (墙面: -280 到 900, 地面固定 500)
└── z: 前后位置 (-1000 到 -600)

关键点：

• 墙脚位于 z = -1000, y = 500（后墙与地面的交界处）
• 墙面：z 固定为 -1000，y 可变
• 地面：y 固定为 500，z 可变

2. 透视投影公式

CSS 3D透视遵循以下公式：

屏幕Y = 原点Y + (世界Y - 原点Y) × 透视距离 / (透视距离 - 世界Z)

代入我们的参数：

• perspective = 1100px
• perspective-origin = 50% 35% → 原点Y = 0.35 × 屏幕高度
• world translateZ = 1000px（房间整体前移）

简化后的公式：

3. 墙脚连续过渡点

墙脚在屏幕上的位置是固定的：

当角色的屏幕Y坐标超过 cornerY 时，进入地面模式；否则在墙面模式。

技术实现

1. 双模式坐标计算（拖拽场景）

拖拽时，我们需要根据鼠标位置判断角色应该在墙面还是地面：

2. 键盘L形路径（连续过渡）

键盘控制的核心是处理墙脚处的连续过渡：

↑键（向上/向后）

↓键（向下/向前）

3. 动态X轴边界

由于透视效果，角色在不同Z深度时，X轴的可见范围不同：

4. 视觉对齐

Spine动画的锚点可能不在角色脚底，需要动态对齐：

关键代码片段

完整的拖拽处理

完整的键盘处理

效果展示

1. 连续过渡

角色从地面后退到墙脚时，会自然地转为爬墙动作，没有跳变。

2. 透视正确

• 地面移动：近大远小，符合视觉直觉
• 墙面移动：1:1映射，精确控制

3. 动态边界

角色在不同Z深度时，X轴移动范围自动调整，不会超出房间边界。

总结

L型活动面的核心是：

1. 双平面映射：墙面（z固定）和地面（y固定）使用不同的坐标计算
2. 墙脚连续性：通过屏幕坐标 cornerY 实现无缝过渡
3. 透视反算：地面模式下，从屏幕Y反算Z坐标
4. 动态边界：根据透视缩放调整X轴限制

这种方案既保证了视觉正确性，又实现了物理连续性，让角色在伪3D房间中自然移动。

扩展思考

• 动画状态机：根据移动方向切换Walk/Climb动画
• 朝向处理：通过 scaleX 翻转实现左右朝向
• 碰撞检测：可在此基础上添加家具等障碍物
• 多人物：扩展为多角色同时在L型面上移动

---

作者：ljb
日期：2026年7月
项目：homepage-template-web