threejs with html elements

by zdam

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
        <div id="container">
            <div id="controls">
                <label id="label1">Distance:</label><label id="labelDistance"></label>
                <br /><select id="ddlSystems" > This doesn't work
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select>
                <br /><button id="button1">This works</button>
                <br /><input id="txtInput" />This doesn't

            </div>
        </div>

CSS

body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
			}
			            canvas { width: 100%; height: 100% }
            #container
            {
            }
            #controls
            {
                background-color: green;
              top: 10px;
              left: 10px;
              position: absolute;
              width: 100%;
              color: white;
              z-index:5;
            }

JavaScript

$(function () {
                

                $("#button1").click(function () {
                    
                    alert('button works');
                });
            });

            var container, stats;
			var camera, scene, renderer;
			var cube, plane;
			var targetRotation = 0;
			var targetRotationOnMouseDown = 0;
			var mouseX = 0;
			var mouseXOnMouseDown = 0;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			init();
			animate();

			function init() {

				container = document.getElementById( 'container' );
				//document.body.appendChild( container );

				var info = document.createElement( 'div' );
				info.style.position = 'absolute';
				info.style.top = '10px';
				info.style.width = '100%';
				info.style.textAlign = 'center';
				info.innerHTML = 'Drag to spin the cube';
				container.appendChild( info );

				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.y = 150;
				camera.position.z = 500;

				scene = new THREE.Scene();

				// Cube

				var geometry = new THREE.BoxGeometry( 200, 200, 200 );

				for ( var i = 0; i < geometry.faces.length; i += 2 ) {

					var hex = Math.random() * 0xffffff;
					geometry.faces[ i ].color.setHex( hex );
					geometry.faces[ i + 1 ].color.setHex( hex );

				}

				var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );

				cube = new THREE.Mesh( geometry, material );
				cube.position.y = 150;
				scene.add( cube );

				// Plane

				var geometry = new THREE.PlaneGeometry( 200, 200 );
				geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );

				var material = new THREE.MeshBasicMaterial( { color: 0xe0e0e0, overdraw: 0.5 } );

				plane = new THREE.Mesh( geometry, material );
				scene.add( plane );

				renderer = new THREE.CanvasRenderer();
				renderer.setClearColor( 0xf0f0f0 );
				renderer.setSize( window.innerWidth,...