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

Question

我正在处理这个 three.js 示例 (http://threejs.org/examples/#webgl_interactive_cubes)，并试图找到一种方法让用户添加具有指定 X、Y 和 Z 位置的框。

我可以使用 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
});

然而，虽然我可以让标题和输入框出现，但它们绝对没有任何功能。我无法在文本框中输入任何内容，也无法向 h1 文本添加 .click(function () ...) 功能。几乎就像我习惯的所有 html 和 javascript 功能都被其余的 three.js 代码禁用了一样。我的最终目标是让 .click 调用一个函数，我可以让我上面定义的 div 像这样 (http://jsfiddle.net/zsfE3/9/) 出现在 h1“在此处添加节点...”下方。

谁能向我解释这里发生了什么以及如何解决它？或者有没有人有更好的方法来做到这一点？感谢大家的帮助！

Answer 1

试试这样的：

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;

}

---

祝你好运！

Answer 2

考虑为您的项目使用 datGUI 库。我和 Three.Js 一起取得了巨大的成功。还有很多例子也在使用它。有关教程，请参阅此 blog post。