diff --git a/src/controls/VoxelPainterControls.js b/src/controls/VoxelPainterControls.js index 8e6d170a..52c62537 100644 --- a/src/controls/VoxelPainterControls.js +++ b/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(); } diff --git a/src/store/middleware/rendererHook.js b/src/store/middleware/rendererHook.js index 8f912071..7ef68c0d 100644 --- a/src/store/middleware/rendererHook.js +++ b/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 { diff --git a/src/store/reducers/canvas.js b/src/store/reducers/canvas.js index 8bd20012..4abb3a0a 100644 --- a/src/store/reducers/canvas.js +++ b/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, diff --git a/src/ui/Renderer.js b/src/ui/Renderer.js index 37f1f51b..951cdbee 100644 --- a/src/ui/Renderer.js +++ b/src/ui/Renderer.js @@ -34,7 +34,7 @@ class Renderer { constructor(store) { this.store = store; - //this.loadViewFromState(); + // this.loadViewFromState(); } get view() { diff --git a/src/ui/Renderer3D.js b/src/ui/Renderer3D.js index 925f4210..894227ce 100644 --- a/src/ui/Renderer3D.js +++ b/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; }