Moving a sprite with arrow keys in Three.js using RxJS observables.

index.js

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 100);
  camera.position.z = 1;

  scene = new THREE.Scene();
  
  geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
  material = new THREE.MeshNormalMaterial();

  mesh = new THREE.Mesh(geometry, material);
  mesh.rotation.x += 1
  mesh.rotation.y += 0.2
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
}

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

const keyBindings = {
  ArrowRight: new THREE.Vector3(0.1, 0, 0),
  ArrowLeft: new THREE.Vector3(-0.1, 0, 0),
  ArrowUp: new THREE.Vector3(0, 0.1, 0),
  ArrowDown: new THREE.Vector3(0, -0.1, 0),
}

// create an observable for the stream of keydown events
let keydown = Rx.Observable
  .fromEvent(document, 'keydown')
  .pluck('key')
  .map(key => keyBindings[key])

// create an observable for the stream of keyup events
// let keyup = Rx.Observable
//  .fromEvent(document, 'keyup')
//  .pluck('key')
//  .map(key => keyBindings[key])

// merge keydown and keyup streams
// let stream = Rx.Observable.merge(
//  keydown,
//  keyup
// )

// subcribe to changes
keydown.subscribe((state) => { mesh.position.add(state) })