如何将WebGL项目Index.html中的按钮与Unity代码关联？

一、修正HTML中的Unity实例化与按钮绑定 #

WebGL环境下，必须等Unity实例初始化完成后再绑定按钮事件，不能直接用未初始化的实例调用方法。替换你现有Index.html中的Unity加载脚本为以下代码：

<script>
    let unityInstance;
    // 实例化Unity应用，替换为你的构建文件路径
    UnityLoader.instantiate("unityContainer", "Build/YourProjectName.json", {
        onProgress: UnityLoader.defaultProgress,
        success: (instance) => {
            unityInstance = instance;
            // 绑定按钮点击事件到Unity函数
            document.getElementById("pickup-btn").addEventListener("click", () => {
                unityInstance.SendMessage("ForkliftController", "PickupItem");
            });
            document.getElementById("place-btn").addEventListener("click", () => {
                unityInstance.SendMessage("ForkliftController", "PlaceItem");
            });
            document.getElementById("color-btn").addEventListener("click", () => {
                unityInstance.SendMessage("ForkliftController", "ChangeMaterialColor");
            });
        }
    });
</script>

关键说明： #

• unityContainer：对应页面中承载Unity的div容器ID，需和你的HTML结构一致
• Build/YourProjectName.json：替换为你实际的WebGL构建文件路径
• ForkliftController：Unity中挂载C#脚本的游戏对象名称（区分大小写）
• PickupItem/PlaceItem/ChangeMaterialColor：你C#脚本中定义的public函数

二、Unity端C#代码要求 #

确保你的函数满足WebGL交互的规则：

public class ForkliftController : MonoBehaviour
{
    // 拾取物品逻辑
    public void PickupItem()
    {
        // 你的代码实现
    }

    // 放置物品逻辑
    public void PlaceItem()
    {
        // 你的代码实现
    }

    // 材质上色逻辑
    public void ChangeMaterialColor()
    {
        // 你的代码实现
    }
}

注意：SendMessage仅支持无参或传递简单类型（string/int/float），无法传递复杂对象。

三、常见报错排查 #

1. "找不到游戏对象/函数"：
   • 核对游戏对象名称、函数名的大小写，确保完全匹配
   • 确认函数是public修饰，且参数类型符合要求
2. "unityInstance未定义"：
   • 必须在success回调内绑定按钮，确保Unity实例已完成初始化
3. 构建文件加载失败：
   • 检查WebGL构建生成的json/data/wasm文件路径是否正确，需与Index.html同目录或路径配置正确

四、页面按钮结构示例 #

确保HTML中存在对应ID的按钮元素：

<button id="pickup-btn">拾取物品</button>
<button id="place-btn">放置物品</button>
<button id="color-btn">切换材质颜色</button>
<div id="unityContainer" style="width: 1280px; height: 720px;"></div>

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