RealityKit/VisionOS中基于拖拽手势的模型切割动画实现

一、实时捕获拖拽的轴向与进度 #

• 监听鼠标的mousedown/mousemove/mouseup事件：
  • 按下鼠标时，记录初始屏幕坐标，同时通过射线检测获取立方体表面的初始接触点（将2D屏幕坐标转换为3D世界坐标），确定切割起始位置，并获取立方体对应轴向的尺寸（如宽度、高度）。
  • 拖拽过程中，计算当前屏幕坐标与初始坐标的偏移量，结合相机投影方式（正交/透视）将2D偏移映射为3D空间中沿拖拽方向的位移。
  • 将实时位移转换成0到1范围的切割进度，比如拖拽位移占立方体总宽度的比例，就是切割完成的百分比。

二、动态切割逻辑的两种实现方式 #

简化方案（快速原型） #

提前拆分出两个半立方体模型，通过拖拽进度动态调整两个模型的缩放与位置，模拟切割推进效果：

• 比如拖拽沿X轴时，左侧模型的X轴缩放等于切割进度，位置向左侧偏移；右侧模型的X轴缩放等于1减去切割进度，位置向右侧偏移，两者拼接后刚好是完整立方体，随拖拽进度变化呈现切割效果。

真实网格切割（高精度） #

对原始立方体网格进行实时分割：

• 根据拖拽方向生成垂直的切割平面，遍历立方体的每个三角面，判断面是否与切割平面相交。
• 对相交的三角面进行拆分，生成新的顶点与面，分别归属切割平面两侧的两个子网格，最终得到两个独立的模型。

三、同步切割动画与拖拽手势 #

• 切割的动画进度完全由拖拽位移驱动，不需要预设时长的动画曲线，直接把拖拽的实时数值映射到切割面位置或子模型的显示状态。
• 做边界限制：当拖拽超出立方体范围时，将切割进度钳制在0到1之间，避免模型出现拉伸、错位等异常。

四、伪代码示例（以Unity为例） #

Vector3 startHitPoint;
float cubeXSize;
bool isCutting = false;
public GameObject leftCube;
public GameObject rightCube;

void OnMouseDown() {
    Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
    if (Physics.Raycast(ray, out RaycastHit hit) && hit.collider.gameObject == gameObject) {
        startHitPoint = hit.point;
        cubeXSize = transform.localScale.x;
        isCutting = true;
        // 初始状态隐藏原立方体，显示拆分后的子模型
        gameObject.SetActive(false);
        leftCube.SetActive(true);
        rightCube.SetActive(true);
    }
}

void OnMouseDrag() {
    if (!isCutting) return;
    Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
    if (Physics.Raycast(ray, out RaycastHit hit)) {
        // 计算X轴向拖拽位移，可根据实际拖拽方向调整轴向
        float dragOffset = hit.point.x - startHitPoint.x;
        // 转换为0~1的切割进度
        float cutProgress = Mathf.Clamp(dragOffset / cubeXSize, 0f, 1f);
        
        // 更新子模型的缩放与位置
        leftCube.transform.localScale = new Vector3(cutProgress, 1f, 1f);
        leftCube.transform.localPosition = new Vector3(-cubeXSize * (1 - cutProgress) / 2f, 0f, 0f);
        
        rightCube.transform.localScale = new Vector3(1f - cutProgress, 1f, 1f);
        rightCube.transform.localPosition = new Vector3(cubeXSize * cutProgress / 2f, 0f, 0f);
    }
}

void OnMouseUp() {
    isCutting = false;
    // 可选择保存切割状态或重置为原立方体
}

内容的提问来源于stack exchange，提问作者siyogurt