Three.js 的输入标签不起作用答案

【问题标题】：Input tag with Three.js not workingThree.js 的输入标签不起作用
【发布时间】：2020-10-12 21:55:52
【问题描述】：

我目前正在使用 Three.js 开发一款游戏。我正在使用 Web GL 渲染器，它占据了整个浏览器窗口。现在我想做一个聊天框，所以我在里面放了一个输入标签这样

<input id="chatMessageDiv" type="text" value="Message..."></input>

对于 CSS

#chatMessageDiv {
    position: absolute;
}

我的问题是我无法点击输入表单来更改消息。光标变为文本图标，但当我单击时没有任何反应。

我尝试将输入 z-index 更改为 1，但这也不起作用。我真的不想添加轨道控制器或轨迹球控制器。

【问题讨论】：

你没有给我们足够的信息来真正帮助你。这可能是一个简单的 z-index/position 问题，例如 THIS
你有 OrbitControls.js 或其他什么或一些控件吗？这控制了chrome中的大多数处理程序，您F12转到Elements-> Event Listeners，您可以检查负责事件Listeners的脚本。我想你可以玩那个:)

标签： javascript html css three.js

【解决方案1】：

您的问题似乎仍未解决。您的输入字段没有反应的一个原因可能是有一个 event.preventDefault() 阻止它。

【讨论】：

【解决方案2】：

您只需将输入#chatMessageDiv 放在包含您的画布的 div 之前。

<input id="chatMessageDiv" type="text" value="Message..."></input>
<div> 
     <canvas width="1370" height="395" style="width: 1370px; height: 395px;"></canvas>
</div>

这是因为画布的行为。

注意：检查 id = info 的元素 div。

Demo webgl animation cloth

Code webgl animation cloth

【讨论】：

【解决方案3】：

可能由于轨道控制或其他原因，您的文档有一些事件侦听器。为了解决同样的问题，我修改了事件 mousedown 侦听器，使其仅绑定在画布（场景）元素上。

document.addEventListener( 'mousedown', onDocumentMouseDown, false );

变成：

var cc = document.getElementsByTagName("canvas");
    cc[0].addEventListener( 'mousedown', onDocumentMouseDown, false );

【讨论】：