New keyboard controls (#101)

* new keyboard controls

* controls: constant keyboard movement dist

* remove zoom limits, add inertia example, fix lint

* fix unregistering controls

* add MapControls to readme doc

examples/electron/client/localViewer.js

@@ -1,8 +1,7 @@
 /* global THREE */
-const { WorldView, Viewer } = require('prismarine-viewer/viewer')
+const { WorldView, Viewer, MapControls } = require('prismarine-viewer/viewer')
 const { Vec3 } = require('vec3')
 global.THREE = require('three')
-require('three/examples/js/controls/OrbitControls')
 
 class LocalViewer {
   constructor (version, savePath, viewDistance = 4) {
@@ -31,7 +30,10 @@ class LocalViewer {
     this.viewer = new Viewer(this.renderer)
     this.viewer.setVersion(this.version)
     // Attach controls to viewer
-    this.controls = new THREE.OrbitControls(this.viewer.camera, this.renderer.domElement)
+    this.controls = new MapControls(this.viewer.camera, this.renderer.domElement)
+    // Enable damping (inertia) on movement
+    this.controls.enableDamping = true
+    this.controls.dampingFactor = 0.09
 
     // Link WorldView and Viewer
     this.viewer.listen(this.worldView)

examples/standalone/index.js

@@ -1,8 +1,7 @@
 /* global THREE XMLHttpRequest */
-const { WorldView, Viewer } = require('prismarine-viewer/viewer')
+const { WorldView, Viewer, MapControls } = require('prismarine-viewer/viewer')
 const { Vec3 } = require('vec3')
 global.THREE = require('three')
-require('three/examples/js/controls/OrbitControls')
 
 const { Schematic } = require('prismarine-schematic')
 
@@ -58,7 +57,7 @@ getSchematic('smallhouse1.schem', async (data) => {
   const viewer = new Viewer(renderer)
   viewer.setVersion(version)
   // Attach controls to viewer
-  const controls = new THREE.OrbitControls(viewer.camera, renderer.domElement)
+  const controls = new MapControls(viewer.camera, renderer.domElement)
 
   // Link WorldView and Viewer
   viewer.listen(worldView)

examples/standalone/webpack.config.js

@@ -26,7 +26,7 @@ const config = {
       Buffer: ['buffer', 'Buffer']
     }),
     new webpack.NormalModuleReplacementPlugin(
-      /prismarine-viewer\/viewer\/lib\/utils/,
+      /prismarine-viewer[/|\\]viewer[/|\\]lib[/|\\]utils/,
       './utils.web.js'
     ),
     new CopyPlugin({

viewer/README.md

@@ -110,3 +110,33 @@ emit unload chunk at this position
 #### WorldView.updatePosition(pos)
 
 change the camera position, and emit corresponding events
+
+### MapControls
+
+Default third person controls based on three.js OrbitControls. Refer to the [documentation here](https://threejs.org/docs/#examples/en/controls/OrbitControls). Controls are applied on animation loop, so you need to call `controls.update()` in your render loop.
+
+##### .controlMap
+The keyboard controls to use. You can provide an array for any of the keys that bind to an action. Defaults:
+
+```js
+this.controlMap = {
+  MOVE_FORWARD: ['KeyW', 'KeyZ'],
+  MOVE_BACKWARD: 'KeyS',
+  MOVE_LEFT: ['KeyA', 'KeyQ'],
+  MOVE_RIGHT: 'KeyD',
+  MOVE_DOWN: 'ShiftLeft',
+  MOVE_UP: 'Space'
+}
+```
+
+##### setRotationOrigin(pos: THREE.Vector3)
+Sets the center point for rotations
+
+##### .verticalTranslationSpeed
+How much the y axis is offset for each vertical translation (movement up and down). To control panning speed for the x/z axis, adjust [`.keyPanSpeed`](https://threejs.org/docs/#examples/en/controls/OrbitControls.keyPanSpeed)
+
+##### .enableTouchZoom, .enableTouchRotate, .enableTouchPan
+Booleans to toggle touch interaction
+
+##### .registerHandlers(), .unregisterHandlers()
+Enables and disables DOM event handling. Useful if you only want to programatically adjust the controls.

viewer/index.js

@@ -1,5 +1,6 @@
 module.exports = {
   Viewer: require('./lib/viewer').Viewer,
   WorldView: require('./lib/worldView').WorldView,
+  MapControls: require('./lib/controls').MapControls,
   getBufferFromStream: require('./lib/simpleUtils').getBufferFromStream
 }