ThreeJs: Tastatur einbinden

Beliebige Tasten lösen Rotation aus

    function onDocumentKeyDown(e) {
        switch (e.keyCode) {
            case 74: // JavaScript key code for letter 'j'
                //alert("hallo world!");
                solidGroup.rotation.y += 0.1;
                break;
        }
    }

    document.addEventListener("keydown", onDocumentKeyDown, false);

Pfeiltasten für Pan-Navigation nutzen

Der einzige und entscheidende Schritt um die Pfeiltasten für die Pan-Naviagtion zu nutzen ist es, den Eventlistener ans window zu hängen:

controls.listenToKeyEvents(window);

Die Default-Geschwindigkeit kann zum Beispiel so verzehnfacht werden:

controls.keyPanSpeed = controls.keyPanSpeed * 10;

Hier ein simples funktionierenden Beispiel:

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <title>OrbitControl demo</title>
  <style>
    body { margin: 0; }
  </style>
</head>
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.js'> </script>
<script type="module">
  import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';
  const scene = new THREE.Scene();

  const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  camera.position.x = 5;
  camera.position.y = -0.5;
  camera.position.z = 3;

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  const controls = new OrbitControls( camera, renderer.domElement );
  controls.listenToKeyEvents(window);
  controls.keyPanSpeed = controls.keyPanSpeed * 10;

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  function loop(){
    renderer.render(scene, camera);
    requestAnimationFrame(loop);
  }
  loop();

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

Weiterführendes Beispiel: https://stackoverflow.com/a/41420794/1777526

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.