Welcome to Input fields for Threejs.
The aim for this library is to enable de use of input form fields on Threejs environment.
This library is being developed using:
- Backbone.js, to get a structured code with a MVC development
- Require.js, a javaScript file and module loader
- Bower, to get an manage all the needed libraries to develop this one
How to install
You can download it from Github or fork it.
You can also get it by bower:
$bower install threejsinputfields
Live example
Full screen
Usage
Due to the used libraries to develop this one first we need to add all the needed javascript files:
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/underscore.js"></script>
<script type="text/javascript" src="../js/backbone.js"></script>
<script type="text/javascript" src="../js/OrbitControls.js"></script>
<script type="text/javascript" src="../js/mousetrap.js"></script>
<script type="text/javascript" src="../js/threejsInputFields.js"></script>You may think that this is a huge dependences list for a library, but is the best way to be more modular.
Lets work, we begin creating the input manager to handle the input fields behaviours:
var inputManager = new threejsInputFields( {
'camera': camera, // Threejs camera
'canvasWidth': canvasWidth, // Scene witdth
'canvasHeight': canvasHeight } ); // Scene hight
}Add first input element ( at the moment only input text type are available ) and this one goes on and orthographic scene:
var firstTextInput = inputManager
// Input type, id, flag to know if the input is on an orthographic scene
.create( 'text', 'first-input', true )
.setValue( 'First text' )
.setFontSize( 40 )
.setBorderSize( 2 )
.setInputPosition( 0, 0, 0, inputManager.POSITION_TOP_LEFT );
// Add the input into the ortographic scene
sceneOrtho.add( firstTextInput.getElement() );Second input element, but this time inside the 3D space:
var secondTextInput = inputManager
// Input type, id, this input goes on a normal scene ( value = false )
.create( 'text', 'second-input' )
.setValue( 'Third text' )
.setFontSize( 20 )
.setBorderSize( 2 )
.setInputPosition( 50, 100, 0 );
// This input goes inside a normal scene
scene.add( secondTextInput.getElement() );Finally, to update the inputs we have to refresh them on every each requestAnimationFrame call
inputManager.requestAnimationFrame();
