fix reload from url, make updateView of 3D canvas keep camera position

relative to target
(WASD still broken and switching between different types of canvases)

src/controls/VoxelPainterControls.js

@@ -62,6 +62,7 @@ const maxDistance = Infinity;
 // How far you can orbit vertically, upper and lower limits.
 // Range is 0 to Math.PI radians.
 const minPolarAngle = 0; // radians
+// const maxPolarAngle = Math.PI / 2; // don't allow going underground
 const maxPolarAngle = Math.PI; // radians
 // How far you can orbit horizontally, upper and lower limits.
 // If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
@@ -95,10 +96,6 @@ class VoxelPainterControls {
   state;
   // "target" sets the location of focus, where the object orbits around
   target;
-  // for reset
-  target0;
-  position0;
-  zoom0;
   //
   // internals
   //
@@ -144,9 +141,6 @@ class VoxelPainterControls {
     //
     this.target = target;
     //
-    this.target0 = target.clone();
-    this.position0 = camera.position.clone();
-    this.zoom0 = camera.zoom;
     this.state = STATE.NONE;
 
     this.onContextMenu = this.onContextMenu.bind(this);
@@ -693,22 +687,6 @@ class VoxelPainterControls {
     return this.spherical.theta;
   }
 
-  saveState() {
-    const { target, camera } = this;
-    this.target0.copy(target);
-    this.position0.copy(camera.position);
-    this.zoom0 = camera.zoom;
-  }
-
-  reset() {
-    this.target.copy(this.target0);
-    this.camera.position.copy(this.position0);
-    this.camera.zoom = this.zoom0;
-
-    this.camera.updateProjectionMatrix();
-    this.state = STATE.NONE;
-  }
-
   update(force) {
     const {
       moveRight,
@@ -778,7 +756,7 @@ class VoxelPainterControls {
 
     this.prevTime = time;
 
-    offset.copy(camera.position).sub(this.target);
+    offset.copy(camera.position).sub(target);
 
     // rotate offset to "y-axis-is-up" space
     offset.applyQuaternion(this.quat);
@@ -826,7 +804,7 @@ class VoxelPainterControls {
     const bound = canvasSize / 2;
     target.clamp({
       x: -bound,
-      y: 10,
+      y: 0,
       z: -bound,
     }, {
       x: bound,
@@ -846,6 +824,7 @@ class VoxelPainterControls {
     this.scale = 1;
 
     if (this.storeViewInStateTime + STORE_UPDATE_DELAY < time) {
+      this.storeViewInStateTime = time;
       this.renderer.storeViewInState();
     }
 

src/store/middleware/rendererHook.js

@@ -47,7 +47,7 @@ export default (store) => (next) => (action) => {
 
       if (is3D === renderer.is3D) {
         renderer.updateCanvasData(state);
-        if (type === 's/RELOAD_URL') {
+        if (type === 'RELOAD_URL') {
           renderer.updateView(state.canvas.view);
         }
       } else {

src/store/reducers/canvas.js

@@ -67,7 +67,7 @@ function getViewFromURL(canvases) {
     canvasId = DEFAULT_CANVAS_ID;
     canvasIdent = canvases[DEFAULT_CANVAS_ID].ident;
   }
-  const { is3D } = !!canvases[canvasId].v;
+  const is3D = !!canvases[canvasId].v;
 
   const x = parseInt(almost[1], 10) || 0;
   const y = parseInt(almost[2], 10) || 0;
@@ -92,6 +92,7 @@ function getViewFromURL(canvases) {
 const initialState = {
   canvasId: null,
   canvasIdent: 'xx',
+  canvases: null,
   canvasSize: 65536,
   historicalCanvasSize: 65536,
   is3D: null,
@@ -158,6 +159,9 @@ export default function canvasReducer(
 
     case 'RELOAD_URL': {
       const { canvases } = state;
+      if (!canvases) {
+        return state;
+      }
       const urlState = getViewFromURL(canvases);
       return {
         ...state,

src/ui/Renderer.js

@@ -34,7 +34,7 @@ class Renderer {
 
   constructor(store) {
     this.store = store;
-    //this.loadViewFromState();
+    // this.loadViewFromState();
   }
 
   get view() {

src/ui/Renderer3D.js

@@ -72,19 +72,21 @@ class Renderer3D extends Renderer {
   constructor(store) {
     super(store);
     this.is3D = true;
-    this.loadViewFromState();
     const state = store.getState();
 
     // camera
     const camera = new PerspectiveCamera(
       45,
       window.innerWidth / window.innerHeight,
-      1,
-      400,
+      5,
+      600,
     );
-    camera.position.set(10, 16, 26);
-    camera.lookAt(0, 0, 0);
     this.camera = camera;
+    // make camera look at target (defaults to 0,0,0) from the sky
+    camera.position.set(0, 150, 190);
+    camera.lookAt(this.target);
+
+    this.loadViewFromState();
 
     // scene
     const scene = new Scene();
@@ -107,7 +109,6 @@ class Renderer3D extends Renderer {
     const sky = new Sky();
     sky.scale.setScalar(450000);
     scene.add(sky);
-
     scene.fog = new FogExp2(0xffffff, 0.003);
 
     const effectController = {
@@ -185,10 +186,6 @@ class Renderer3D extends Renderer {
       domElement,
       store,
     );
-    // TODO doesn't work like this anymore
-    controls.maxPolarAngle = Math.PI / 2;
-    controls.minDistance = 10.00;
-    controls.maxDistance = 100.00;
     this.controls = controls;
 
 
@@ -239,8 +236,12 @@ class Renderer3D extends Renderer {
     if (view.length !== 3) {
       return;
     }
-    console.log('go to', view);
-    this.target.set(...view);
+    const { target } = this;
+    // camera has to look from the same angle and distance
+    const offset = target.clone();
+    target.set(...view);
+    offset.sub(target);
+    this.camera.position.sub(offset);
     this.forceNextRender = true;
   }