antonkulaga/gist:e6239bb7aeabef1e020e

## gistfile1.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<title>Keyboard events do not work for inputs. I cannot type anything there=(</title>

	</head>
	<body>
		<script src="../build/three.min.js"></script>
		<script src="js/controls/TrackballControls.js"></script>
		<script src="js/renderers/CSS3DRenderer.js"></script>

		<div id="container"></div>
		<div id="info">Keyboard events do not work for inputs. I cannot type anything there=(

		<script>

			var camera, scene, renderer;
			var controls;

			var particlesTotal = 10;
			var positions = [];
			var objects = [];
			var current = 0;

			init();
			animate();

			function init() {

				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
				camera.position.set( 600, 400, 1500 );
				camera.lookAt( new THREE.Vector3() );

				scene = new THREE.Scene();


				for ( var i = 0; i < particlesTotal; i ++ ) {


						var sp = document.createElement( 'textarea' )
						sp.value = "Sprite element"


						var sprite = new THREE.CSS3DSprite( sp );
						sprite.position.x = (0.5-Math.random()) * 1000;
						sprite.position.y = (0.5-Math.random()) * 1000;
						sprite.position.z = (Math.random()) * 1000;
						scene.add( sprite );

						objects.push( sprite );

						var obj = document.createElement( 'textarea' )
						obj.value = "Object element"


						var object = new THREE.CSS3DObject( obj );
						object.position.x = (0.5-Math.random()) * 1000;
						object.position.y = (0.5-Math.random()) * 1000;
						object.position.z = (Math.random()) * 1000;
						objects.push( object );
						scene.add( object );

					}


				renderer = new THREE.CSS3DRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.domElement.style.position = 'absolute';
				document.getElementById( 'container' ).appendChild( renderer.domElement );

				//

				controls = new THREE.TrackballControls( camera, renderer.domElement );
				controls.rotateSpeed = 0.5;

				//

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}


			function animate() {

				requestAnimationFrame( animate );

				controls.update();

				var time = performance.now();


				renderer.render( scene, camera );

			}

		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<title>Keyboard events do not work for inputs. I cannot type anything there=(</title>

	</head>
	<body>
	<script src="../build/three.min.js"></script>
	<script src="js/controls/TrackballControls.js"></script>
	<script src="js/renderers/CSS3DRenderer.js"></script>

	<div id="container"></div>
	<div id="info">Keyboard events do not work for inputs. I cannot type anything there=(

	<script>

	var camera, scene, renderer;
	var controls;

	var particlesTotal = 10;
	var positions = [];
	var objects = [];
	var current = 0;

	init();
	animate();

	function init() {

	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
	camera.position.set( 600, 400, 1500 );
	camera.lookAt( new THREE.Vector3() );

	scene = new THREE.Scene();


	for ( var i = 0; i < particlesTotal; i ++ ) {


	var sp = document.createElement( 'textarea' )
	sp.value = "Sprite element"



	var sprite = new THREE.CSS3DSprite( sp );
	sprite.position.x = (0.5-Math.random()) * 1000;
	sprite.position.y = (0.5-Math.random()) * 1000;
	sprite.position.z = (Math.random()) * 1000;
	scene.add( sprite );

	objects.push( sprite );

	var obj = document.createElement( 'textarea' )
	obj.value = "Object element"


	var object = new THREE.CSS3DObject( obj );
	object.position.x = (0.5-Math.random()) * 1000;
	object.position.y = (0.5-Math.random()) * 1000;
	object.position.z = (Math.random()) * 1000;
	objects.push( object );
	scene.add( object );

	}





	renderer = new THREE.CSS3DRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.domElement.style.position = 'absolute';
	document.getElementById( 'container' ).appendChild( renderer.domElement );

	//

	controls = new THREE.TrackballControls( camera, renderer.domElement );
	controls.rotateSpeed = 0.5;

	//

	window.addEventListener( 'resize', onWindowResize, false );

	}

	function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

	}



	function animate() {

	requestAnimationFrame( animate );

	controls.update();

	var time = performance.now();



	renderer.render( scene, camera );

	}

	</script>
	</body>
	</html>