WebGL平台Input.GetAxis按键释放失效问题求助

这是WebGL平台下Unity旧输入系统常见的焦点捕获问题，我来帮你搞定它！

问题根源 #

WebGL运行在浏览器环境中，当你按住方向键同时用鼠标旋转并移出Canvas区域时，浏览器会把输入焦点从Unity画布转移到浏览器窗口或其他元素上。此时Unity无法接收到按键释放事件，导致Input.GetAxisRaw("Horizontal")和Input.GetAxisRaw("Vertical")一直保持最后一次的输入值（比如1或-1），不会重置为0，最终表现为按键失效。

快速解决方案：手动重置轴输入状态 #

我们可以通过判断鼠标是否在WebGL画布内，强制在鼠标移出时重置方向轴的输入值，具体实现如下：

1. 先添加一个判断鼠标是否在画布内的辅助方法：

private bool IsMouseOverWebGLCanvas()
{
    #if UNITY_WEBGL && !UNITY_EDITOR
    // WebGL平台下，用WebGLInput的鼠标位置判断是否在画布范围内
    return UnityEngine.WebGLInput.mousePosition.x >= 0 && UnityEngine.WebGLInput.mousePosition.x <= Screen.width &&
           UnityEngine.WebGLInput.mousePosition.y >= 0 && UnityEngine.WebGLInput.mousePosition.y <= Screen.height;
    #else
    // 编辑器或其他平台默认返回true
    return true;
    #endif
}

2. 修改你的UpdateMovement方法，在获取轴输入时加入判断：

void UpdateMovement() {
    bool accelerate = Input.GetKey(KeyCode.LeftShift) || Input.GetKey(KeyCode.RightShift);
    
    // 关键：鼠标移出画布时强制重置方向轴输入为0
    float horizontalInput = IsMouseOverWebGLCanvas() ? Input.GetAxisRaw("Horizontal") : 0f;
    float verticalInput = IsMouseOverWebGLCanvas() ? Input.GetAxisRaw("Vertical") : 0f;
    
    moveDirection = new Vector3(
        horizontalInput * moveSpeed, 0, verticalInput * moveSpeed);
    moveDirection = transform.TransformDirection(moveDirection);
    
    // 保留原有剩余逻辑
    if (Input.GetButton("Up")) {
        moveDirection.y += moveSpeed;
    } else if (Input.GetButton("Down")) {
        moveDirection.y -= moveSpeed;
    }
    if (Input.GetAxisRaw("Mouse ScrollWheel") > 0) {
        moveDirection.y += scrollSpeed;
    } else if (Input.GetAxisRaw("Mouse ScrollWheel") < 0) {
        moveDirection.y -= scrollSpeed;
    }
    
    moveDirection *= accelerate ? speed : moveSpeed;
    controller.Move(moveDirection * Time.deltaTime);
}

进阶方案：改用Unity新输入系统（Input System） #

如果你的项目长期维护，更推荐迁移到Unity官方的新输入系统（Input System）。它针对WebGL等平台的输入焦点问题做了优化，能自动处理焦点变化时的输入状态重置，而且API更灵活、可扩展性更强。

你只需要创建对应的输入动作（比如Move、Rotate），通过Player Input组件绑定回调，就能彻底避免这类旧输入系统的兼容性问题。

补充：保持画布焦点的WebGL前端方案 #

你也可以通过修改WebGL模板的HTML代码，强制在鼠标离开画布时重新聚焦，确保Unity能持续捕获输入：

<script>
    window.onload = function() {
        const canvas = document.querySelector("#unity-canvas");
        // 鼠标离开画布时重新聚焦
        canvas.addEventListener("mouseleave", () => {
            canvas.focus();
        });
        // 初始加载后让画布获得焦点
        canvas.focus();
    };
</script>

注意：部分浏览器会限制自动聚焦，需要用户先点击过画布一次才能生效。

内容的提问来源于stack exchange，提问作者Muhammad Faizan Khan