我正在关注这个three.js示例（http://threejs.org/examples/#webgl_interactive_cubes），并试图找到一种方法让用户添加指定X，Y，& Z位置的框。在使用three.js时使用JavaScript获取用户输入？

我可以用一个javascript提示

var boxes = prompt("X Position", 500); // 500 = Default position

做到这一点。然而，我想有可能使用户输入多个字段（例如，X，Y，Z位置;箱子的大小等），所以我想添加输入框。我知道如何做到这一点的唯一方法是使用HTML/CSS/JavaScript的像这样的东西 -

<!-- CSS formating of Input Boxes --> 
<style type = "text/css"> 
     #x_pos { 
      position: absolute; 
      bottom: 120px; 
      left: 10px; 
      width: 130px; 
      background-color: #3c4543; 
      border-top-left-radius: 5px; 
      border-top-right-radius: 5px; 
      border: 2px solid #000000; 
      font-family: Futura; 
     } 
     ... Repeat for #y_pos & #z_pos 
</style> 

<!-- Adding a div for each Input Box --> 
<div id="x_pos"> 
    <input type="text" id="xpos"> 
</div> 
... Repeat for #y_pos & #z_pos 

<h1>Add Node here...</h1> 

<!--Allowing user to add input to the Input Box and saving that value as the x, y, & z positions --> 
<script text="text/javascript"> 

var xPosition; 
$(document).ready(function(){    
    $('#xpos').val('Longitude'); 
    $("#xpos").change(function(){ 
     xPosition = $('#xpos').val(); 
    }) 
    ... Repeat for #ypos & #zpos 
});

然而，当我可以得到页眉和输入框出现，他们绝对没有的功能。我无法在文本框中输入任何内容，也无法将.click（function（）...）功能添加到h1文本中。这几乎就像我习惯的所有html和javascript功能已被其余的three.js代码禁用。我的最终目标是让.click调用一个函数，使我可以将上面定义的div显示在h1“Add Node here ...”下面（http://jsfiddle.net/zsfE3/9/）。

任何人都可以向我解释这里发生了什么，以及我可以如何解决它？或者有没有人有更好的方法来做到这一点？感谢球员的任何帮助！

来源

2014-11-03 David Streid

为什么不使用DAT.GUI？ – gaitat 2014-11-03 21:09:58

Consinder将datGUI作为您的项目使用。我和Three.Js一起获得了巨大的成功。还有一些例子也使用它。有关教程，请参见blog post。

来源

2014-11-03 21:12:40 Tom

感谢您的咨询！您是否遇到过用户无法输入任何内容的问题？我现在有这个问题。我发布这是另一个问题，提供更多的细节 - http://stackoverflow.com/questions/27240720/trouble-adding-text-input-directly-into-dat-gui-when-working-with-java-3d – 2014-12-02 02:06:04

@ DavidStreid不，我从来没有遇到过这个问题。确保你的CSS是正确的。 datGUI可能是绝对定位的。检查您的zIndex是否位于WebGL画布上方。如果有什么帮助你，请考虑接受当前问题的答案。 – Tom 2014-12-03 10:08:07

我接受了你的回答。我将DAT.GUI.min.js中css元素的z-index改为非常积极，希望能将gui放在画布上方。我无法在代码或任何.js脚本源文件中找到WebGL画布的zIndex。非常感谢您的指导。 – 2014-12-05 06:08:11

尝试这样：

HTML：

<input type = "text" id = "input1"> 
<button>ADD BOX</button> 
</input>

CSS：

canvas{z-index:-1;} 

#input1{ 

position:fixed; 
right:40px; 
top:40px; 
z-index:1;  
width:5%; 
height:60px; 

}

祝您好运！

来源

2014-11-03 21:08:29 DripDrop

在使用three.js时使用JavaScript获取用户输入？

回答

祝您好运！

相关问题