Unity C#向WebGL Index.html传递数据并填充表格的技术问题

1. 修改WebGL插件（jslib） #

替换原弹窗逻辑，改为直接更新HTML表格元素，支持单个字段或批量数据更新：

mergeInto(LibraryManager.library, {
    // 更新对象名称到表格
    UpdateObjectName: function (namePtr) {
        const objectName = Pointer_stringify(namePtr);
        document.getElementById('name').textContent = objectName;
    },
    // 批量更新所有字段（推荐用JSON传递多数据）
    UpdateObjectData: function (jsonPtr) {
        const objectData = JSON.parse(Pointer_stringify(jsonPtr));
        document.getElementById('name').textContent = objectData.name || '';
        document.getElementById('ID').textContent = objectData.id || '';
        document.getElementById('PNr').textContent = objectData.pnr || '';
        document.getElementById('color').textContent = objectData.color || '';
    }
});

2. 调整C#脚本，调用JS方法 #

修改点击事件脚本，按需选择传递单个数据或批量JSON数据：

using System.Runtime.InteropServices;
using UnityEngine;

public class StackerObject : MonoBehaviour
{
    [DllImport("__Internal")]
    private static extern void UpdateObjectName(string name);

    [DllImport("__Internal")]
    private static extern void UpdateObjectData(string jsonData);

    void OnMouseDown()
    {
        // 方式1：仅传递名称
        string objName = gameObject.name;
        Debug.Log("发送数据到JS: " + objName);
#if UNITY_WEBGL && !UNITY_EDITOR
        UpdateObjectName(objName);
#endif

        // 方式2：传递完整数据（取消注释即可使用）
        // ObjectData data = new ObjectData
        // {
        //     name = objName,
        //     id = "STACK-" + gameObject.GetInstanceID(),
        //     pnr = "PN-" + transform.GetSiblingIndex(),
        //     color = GetComponent<Renderer>().material.color.ToString()
        // };
        // string json = JsonUtility.ToJson(data);
        // UpdateObjectData(json);
    }

    // 用于序列化的内部数据类
    [System.Serializable]
    private class ObjectData
    {
        public string name;
        public string id;
        public string pnr;
        public string color;
    }
}

3. 确保HTML表格可被访问 #

你的现有表格结构已满足要求，只需保证表格在DOM中正常加载，未被Unity Canvas遮挡或隐藏：

<table>
    <tr>
        <th class="type">Data</th>
        <th>Value</th>
    </tr>
    <tr>
        <td>Name:</td>
        <td id="name"></td>
    </tr>
    <tr>
        <td>ID:</td>
        <td id="ID"></td>
    </tr>
    <tr>
        <td>PNr:</td>
        <td id="PNr"></td>
    </tr>
    <tr>
        <td>Color:</td>
        <td id="color"></td>
    </tr>
</table>

注意事项 #

• jslib文件必须放在Unity项目的Plugins/WebGL目录下，Unity会自动处理编译。
• 所有JS调用逻辑需包裹在#if UNITY_WEBGL && !UNITY_EDITOR条件内，避免编辑器报错。
• 传递复杂数据时，JSON是最可靠的方式，Unity内置的JsonUtility可直接序列化自定义类。

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