Getting User input with javascript while using three.js?

Question

I am working off of this three.js example (http://threejs.org/examples/#webgl_interactive_cubes) and am trying to find a way for the user to add boxes with specified X, Y, & Z positions.

I could do this with a javascript prompt

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

However, I want to make it possible for the user to enter multiple fields (E.g. x, y, z positions; size of box, etc.), so I want to add input boxes. The only way I know how to do this is to use html/css/javascript with something like this -

<!-- 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
});

However, while I can get the Header and input box to appear, they have absolutely no functionality. I can't type anything in the text boxes and I can't add .click(function () ...) functionality to the h1 text. It's almost like all html and javascript functionality I am used to has been disabled by the rest of the three.js code. My final goal will be to have .click call a function that I can have the divs I defined above appear underneath the h1 "Add Node here..." like this (http://jsfiddle.net/zsfE3/9/).

Can anyone explain to me what is going on here and how I might be able to fix it? Or does anyone have a better way to do this? Thanks guys for any help!

score 0 · Answer 1 · answered Nov 03 '14 at 21:08

0

Try Something Like This:

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;

}

Good Luck!

answered Nov 03 '14 at 21:08

DripDrop

994
1
9
18

score 0 · Accepted Answer · answered Nov 03 '14 at 21:12

0

Consinder using the datGUI lib for your project. I had great success with it together with Three.Js. Also there are a number of examples also using it. See this blog post for a tutorial.

answered Nov 03 '14 at 21:12

Tom

1,241
2
13
21

Thanks for the advice! Did you have any issues where the user couldn't type in any input? I am having that issue now. I posted this as another question that provides more detail - http://stackoverflow.com/questions/27240720/trouble-adding-text-input-directly-into-dat-gui-when-working-with-java-3d – David Streid Dec 02 '14 at 02:06
@DavidStreid No, I have never had thad issue. Make sure that your CSS is right. The datGUI is probably absolute positioned. Check that your zIndex is above your WebGL canvas. Consider accepting an answer for the current question if anything helped you. – Tom Dec 03 '14 at 10:08
I accepted your answer. I'm changing the z-indexes of the css elements in DAT.GUI.min.js to be extremely positive, hoping that will place the gui above the canvas. I am unable to find the zIndex of the WebGL canvas in the code or any of the .js script source files. Thank you very much for your guidance. – David Streid Dec 05 '14 at 06:08

Getting User input with javascript while using three.js?

2 Answers2

Good Luck!