React Three Fiber中Hover动画与Rapier RigidBody同步延迟及坐标偏移问题求助

大家好，我碰到个棘手的问题：当鼠标悬停在方块上时，方块会执行上升的动画，但RigidBody总是慢半拍。我已经在每帧都做了同步操作，但看起来动画似乎是基于RigidBody的坐标原点来计算的，导致两者的位置始终有偏移。有没有大佬能帮我看看该怎么修复这个问题？

问题现象展示 #

• 悬停动画与物理体不同步：方块动画上升时，物理体明显滞后跟随
• 坐标偏移直观表现：从另一视角能清晰看到动画位置和物理体位置的错位

我的代码实现 #

function BoxObject({count}) {
        const meshRef = useRef();
        const rigidBodyRef: MutableRefObject<RapierRigidBody> = useRef();   
    
        const [isHovered, setHovered] = React.useState(false);
        const props = useSpring<MeshProps>({
            position: isHovered ? [2, 2, 0] : [2, 1, 0]
        });
    
        const updateRigidBody = useCallback(() => {
            if (!meshRef.current || !rigidBodyRef.current) {
                return;
            }
            if (!isHovered) {
                return;
            }
            const {position, rotation} = meshRef.current;
            rigidBodyRef.current.setTranslation(position, false);
            // rigidBodyRef.current.setRotation(rotation, true);
        }, [isHovered]);
    
        useFrame(() => {
            updateRigidBody();
        })
    
        return <group position={[2, 1, 0]}>
            {new Array(count).fill(0).map((k, i) =>
                <a.mesh
                    {...props}
                    ref={meshRef}
                    key={`box${i}`}
                    onPointerOver={() => setHovered(true)}
                    onPointerOut={() => setHovered(false)}
                >
                    <RigidBody
                        ref={rigidBodyRef}
                        name={`box${i}`}>
                        <Block/>
                    </RigidBody>
                </a.mesh>
            )}
        </group>
    }

备注：内容来源于stack exchange，提问作者Serge Esmanovich