Unity WebGL文本输入

心前阳光2025-07-12 14:44

插件

kou-yeung/WebGLInput

版本如下图所示：

使用

Unity版本：2019.4.40

使用:文本输入组件对象添加WebGLInput脚本，没有其他额外操作，输入组件正常使用

问题：插件中部分C#语法需要高版本支持，可自行修改。

发布

使用WebGL默认模板发布。

问题：

非全屏模式下，文本输入正常，输入光标跟随移动。

全屏模式下，文本输入异常，输入光标不跟随移动。

解决：

运行插件作者的示例项目(默认)，查看网页原代码。

修改index.html文件，覆盖全屏按钮的点击事件。修改如下：

csharp 复制代码

  <script>
    var fullscreenButton = document.querySelector(".fullscreen");
    fullscreenButton.onclick = function () {
      document.makeFullscreen('unityContainer');
    };
  </script>

完整index.html

csharp 复制代码

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Wooden Toy Production Line Webgl</title>
  <link rel="shortcut icon" href="TemplateData/favicon.ico">
  <link rel="stylesheet" href="TemplateData/style.css">
  <script src="TemplateData/UnityProgress.js"></script>
  <script src="Build/UnityLoader.js"></script>
  <script>
    var unityInstance = UnityLoader.instantiate("unityContainer", "Build/WebGL.json", { onProgress: UnityProgress });
  </script>
</head>

<body>
  <div class="webgl-content">
    <div id="unityContainer" style="width: 1008px; height: 567px"></div>
    <div class="footer">
      <div class="webgl-logo"></div>
      <div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
      <div class="title">Test Text Input</div>
    </div>
  </div>
  <script>
    var fullscreenButton = document.querySelector(".fullscreen");
    fullscreenButton.onclick = function () {
      document.makeFullscreen('unityContainer');
    };
  </script>
</body>

</html>

成功解决

小优化

使用 WebGL 模板

创建一个webgl模板，不需要每次发布后修改index.html

找到引擎安装路径，在文件夹中查找webgl模板，例如搜索 WebGLTemplates
Assets文件夹下新建文件夹WebGLTemplates，此文件夹中新建文件夹Custom,名字区分不同的模板
复制默认模板中的内容到Custom文件夹中，修改index.html
项目设置窗口中选择自定义的模板