当前位置：首页 > news >正文

Unity WebGL文本输入

news 2025/7/11 6:36:55

插件

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>