Unity WebGL文本输入

发布于:2025-07-12 ⋅ 阅读:(20) ⋅ 点赞:(0)

插件

kou-yeung/WebGLInput
版本如下图所示:

在这里插入图片描述

使用

Unity版本:2019.4.40
使用:文本输入组件对象添加WebGLInput脚本,没有其他额外操作,输入组件正常使用
问题:插件中部分C#语法需要高版本支持,可自行修改。

发布

使用WebGL默认模板发布。

问题:

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

解决:

运行插件作者的示例项目(默认),查看网页原代码。
修改index.html文件,覆盖全屏按钮的点击事件。修改如下:

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

完整index.html

<!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

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

网站公告

今日签到

点亮在社区的每一天
去签到