three.js control panel example

by Herst

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/Herst/three.js/OrbCtrlPanRestrExample/examples/js/controls/OrbitControls.js"></script>
<div id="modelstuff">
  <div id="ctrlBtnArea">
    <table>
      <tr>
        <td>
          <input type="button" id="btnRCW" class="ctrlBtn" value="↻" alt="" title="im UZG drehen" />
        </td>
        <td>
          <input type="button" id="btnCntrlU" class="ctrlBtn" value="▲" alt="" title="nach vorne bewegen" />
        </td>
        <td>
          <input type="button" id="btnRCCW" class="ctrlBtn" value="↺" alt="" title="gegen UZG drehen" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="button" id="btnCntrlL" class="ctrlBtn" value="◄" alt="" title="nach links bewegen" />
        </td>
        <td><input type="button" id="btnHome" class="ctrlBtn" value="⌂" alt="" title="zurücksetzen" /></td>
        <td>
          <input type="button" id="btnCntrlR" class="ctrlBtn" value="►" alt="" title="nach rechts bewegen" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="button" id="btnRU" class="ctrlBtn" value="⇑" alt="" title="nach oben drehen" />
        </td>
        <td>
          <input type="button" id="btnCntrlD" class="ctrlBtn" value="▼" alt="" title="nach unten bewegen" />
        </td>
        <td>
          <input type="button" id="btnRD" class="ctrlBtn" value="⇓" alt="" title="nach unten drehen" />
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <input type="button" id="btnZoomIn" class="ctrlBtn" value="+" alt="" title="hineinzoomen" style="width: 49.5%; float: left;" />
          <input type="button" id="btnZoomOut" class="ctrlBtn" value="-" alt="" title="herauszoomen" style="width: 49.5%; float: right;" />
        </td>
      </tr>
    </table>
  </div>
</div>

CSS

body {
    overflow: hidden;
}

#modelstuff {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

#modelstuff input[type="button"] {
  font-size: 100%;
  outline-offset: 0;
  padding: 0;
}

#modelstuff canvas {
  cursor: crosshair;
}

#ctrlBtnArea {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 2.5em;
}

#ctrlBtnArea .ctrlBtn {
  width: 100%;
}

#ctrlBtnArea table {
  background-color: #fff;
  border-collapse: separate;
  border-spacing: 0;
  border-width: 1px 0 0 1px;
  margin-bottom: 24px;
  width: 100%;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

#ctrlBtnArea tbody {
  background-color: #fff;
  border: 0;
}

#ctrlBtnArea tr {
  background-color: #fff;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  line-height: 1.5;
}

#ctrlBtnArea td {
  padding: 0.1em 0.1em;
  text-align: center;
}

ctrlBtnArea input {
  background-color: #24890d;
  border: 0;
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 30px 11px;
  vertical-align: bottom;
}

JavaScript

var camera, renderer, controls;
var floor, box;
var scene;
var i;

init();
render();

function init() {

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(150, 450, 450);

    scene = new THREE.Scene();

    floor = new THREE.Mesh(
    new THREE.PlaneGeometry(500, 500),
    new THREE.MeshBasicMaterial({
        color: 0x00ff00
    }));
    floor.rotation.x = -Math.PI / 2


    scene.add(floor);

    box = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100), new THREE.MeshBasicMaterial({
        color: 0xff0000
    }));
    box.translateY(50.001);

    scene.add(box);

    renderer = new THREE.WebGLRenderer({
        antialias: true,
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x5f5f5f);

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.maxPolarAngle = Math.PI / 2 * 0.8;

   getElementById("modelstuff").appendChild(renderer.domElement);
}

function render() {

    requestAnimationFrame(render);

    renderer.render(scene, camera);
}