Question

我目前正在与Three.js合作。我正在使用Web GL渲染器，它占用了整个浏览器窗口。现在我想制作一个聊天框，所以我把输入标签放在这里

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

和CSS

#chatMessageDiv {
    position: absolute;
}

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

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

Answer 1

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

<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

Answer 2

看起来您的问题仍未解决。输入字段没有反应的原因可能是DELIMITER // CREATE TRIGGER trRDate BEFORE INSERT ON Report_table FOR EACH ROW BEGIN IF (Date IS NULL or Date = '') THEN SET NEW.Date = CURDATE(); END IF; END; // DELIMITER ;阻止了它。

Answer 3

您的文档可能由于Orbit Controls或其他原因而具有某些事件侦听器。为了解决这个问题，我修改了事件mousedown侦听器，使之仅绑定在canvas（scene）元素上。

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

成为：

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

输入标签与Three.js无法正常工作

3 个答案: