use url coordinates on 3D canvas

This commit is contained in:
HF 2020-01-31 11:13:23 +01:00
parent a8cbe93390
commit d031412fa1
6 changed files with 71 additions and 48 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 36 KiB

View File

@ -799,6 +799,13 @@ class VoxelPainterControls extends EventDispatcher {
state = STATE.NONE; state = STATE.NONE;
}; };
this.setView = (view) => {
if (view.length !== 3) {
return;
}
scope.target.set(...view);
};
// this method is exposed, but perhaps it would be better if we can make it private... // this method is exposed, but perhaps it would be better if we can make it private...
this.update = (() => { this.update = (() => {
const offset = new Vector3(); const offset = new Vector3();

View File

@ -50,6 +50,7 @@ export const DEFAULT_CANVASES = {
[207, 110, 228], [207, 110, 228],
[130, 0, 128], [130, 0, 128],
], ],
cli: 2,
size: 65536, size: 65536,
bcd: 4000, bcd: 4000,
pcd: 7000, pcd: 7000,

View File

@ -43,7 +43,7 @@ export type CanvasState = {
*/ */
function getGivenCoords() { function getGivenCoords() {
// if (window.coordx && window.coordy) return [window.coordx, window.coordy]; // if (window.coordx && window.coordy) return [window.coordx, window.coordy];
return [0, 0]; return [0, 0, 0];
} }
/* /*
@ -61,41 +61,40 @@ function getViewFromURL(canvases: Object) {
// will be null if not in DEFAULT_CANVASES // will be null if not in DEFAULT_CANVASES
const canvasId = getIdFromObject(canvases, almost[0]); const canvasId = getIdFromObject(canvases, almost[0]);
let colors; // canvasId is null if canvas data isn't loaded yet and it's not
let clrIgnore; // the default canvas.
let canvasSize; // aka those few milliseconds before /api/me
let canvasStartDate; const canvas = (canvasId === null)
let is3D; ? canvases[DEFAULT_CANVAS_ID]
if (canvasId == null) { : canvases[canvasId];
// if canvas informations are not available yet const {
// aka /api/me didn't load yet colors,
colors = canvases[DEFAULT_CANVAS_ID].colors; cli: clrIgnore,
clrIgnore = 2; sd: canvasStartDate,
canvasSize = 1024; size: canvasSize,
is3D = false; } = canvas;
canvasStartDate = null; const is3D = !!canvas.v;
} else {
const canvas = canvases[canvasId];
colors = canvas.colors;
clrIgnore = canvas.cli;
canvasSize = canvas.size;
is3D = !!canvas.v;
canvasStartDate = canvas.sd;
}
const x = parseInt(almost[1], 10); const x = parseInt(almost[1], 10);
const y = parseInt(almost[2], 10); const y = parseInt(almost[2], 10);
let urlscale = parseInt(almost[3], 10); const z = parseInt(almost[3], 10);
if (Number.isNaN(x) || Number.isNaN(y)) { if (Number.isNaN(x) || Number.isNaN(y)) {
const thrown = 'NaN'; throw new Error('NaN');
throw thrown;
} }
if (!urlscale || Number.isNaN(urlscale)) { const view = [x, y, z];
urlscale = DEFAULT_SCALE;
let scale = z;
if (!scale || Number.isNaN(scale)) {
scale = DEFAULT_SCALE;
} else { } else {
urlscale = 2 ** (urlscale / 10); scale = 2 ** (scale / 10);
} }
urlscale = clamp(urlscale, TILE_SIZE / canvasSize, MAX_SCALE);
if (!is3D && canvasId !== null) {
scale = clamp(scale, TILE_SIZE / canvasSize, MAX_SCALE);
view.length = 2;
}
return { return {
canvasId, canvasId,
canvasIdent, canvasIdent,
@ -105,22 +104,22 @@ function getViewFromURL(canvases: Object) {
canvasMaxTiledZoom: getMaxTiledZoom(canvasSize), canvasMaxTiledZoom: getMaxTiledZoom(canvasSize),
palette: new Palette(colors, 0), palette: new Palette(colors, 0),
clrIgnore, clrIgnore,
view: [x, y], view,
viewscale: urlscale, viewscale: scale,
scale: urlscale, scale,
canvases, canvases,
}; };
} catch (error) { } catch (error) {
const canvas = canvases[DEFAULT_CANVAS_ID]; const canvasd = canvases[DEFAULT_CANVAS_ID];
return { return {
canvasId: DEFAULT_CANVAS_ID, canvasId: DEFAULT_CANVAS_ID,
canvasIdent: canvas.ident, canvasIdent: canvasd.ident,
canvasSize: canvas.size, canvasSize: canvasd.size,
is3D: !!canvas.v, is3D: !!canvasd.v,
canvasStartDate: null, canvasStartDate: null,
canvasMaxTiledZoom: getMaxTiledZoom(canvas.size), canvasMaxTiledZoom: getMaxTiledZoom(canvasd.size),
palette: new Palette(canvas.colors, 0), palette: new Palette(canvasd.colors, 0),
clrIgnore: canvas.cli, clrIgnore: canvasd.cli,
view: getGivenCoords(), view: getGivenCoords(),
viewscale: DEFAULT_SCALE, viewscale: DEFAULT_SCALE,
scale: DEFAULT_SCALE, scale: DEFAULT_SCALE,
@ -275,7 +274,10 @@ export default function canvasReducer(
} = canvas; } = canvas;
const canvasMaxTiledZoom = getMaxTiledZoom(canvasSize); const canvasMaxTiledZoom = getMaxTiledZoom(canvasSize);
const palette = new Palette(colors, 0); const palette = new Palette(colors, 0);
const view = (canvasId === 0) ? getGivenCoords() : [0, 0]; const view = (canvasId === 0) ? getGivenCoords() : [0, 0, 0];
if (!is3D) {
view.length = 2;
}
return { return {
...state, ...state,
canvasId, canvasId,
@ -295,7 +297,7 @@ export default function canvasReducer(
case 'RECEIVE_ME': { case 'RECEIVE_ME': {
const { canvases } = action; const { canvases } = action;
let { canvasIdent } = state; let { canvasIdent, scale, view } = state;
let canvasId = getIdFromObject(canvases, canvasIdent); let canvasId = getIdFromObject(canvases, canvasIdent);
if (canvasId === null) { if (canvasId === null) {
@ -312,6 +314,11 @@ export default function canvasReducer(
const canvasMaxTiledZoom = getMaxTiledZoom(canvasSize); const canvasMaxTiledZoom = getMaxTiledZoom(canvasSize);
const palette = new Palette(colors, 0); const palette = new Palette(colors, 0);
if (!is3D) {
scale = clamp(scale, TILE_SIZE / canvasSize, MAX_SCALE);
view = [view[0], view[1]];
}
return { return {
...state, ...state,
canvasId, canvasId,
@ -323,6 +330,9 @@ export default function canvasReducer(
palette, palette,
clrIgnore, clrIgnore,
canvases, canvases,
viewscale: scale,
scale,
view,
}; };
} }

View File

@ -32,6 +32,7 @@ export default (store) => (next) => (action) => {
case 'SELECT_CANVAS': case 'SELECT_CANVAS':
case 'RECEIVE_ME':
case 'ON_VIEW_FINISH_CHANGE': { case 'ON_VIEW_FINISH_CHANGE': {
const { const {
view, view,

View File

@ -50,7 +50,6 @@ class Renderer {
this.store = store; this.store = store;
const state = store.getState(); const state = store.getState();
this.objects = []; this.objects = [];
this.loadedChunks = new Map();
this.chunkLoader = null; this.chunkLoader = null;
// camera // camera
@ -193,6 +192,7 @@ class Renderer {
updateCanvasData(state: State) { updateCanvasData(state: State) {
const { const {
canvasId, canvasId,
view,
} = state.canvas; } = state.canvas;
if (canvasId !== this.canvasId) { if (canvasId !== this.canvasId) {
this.canvasId = canvasId; this.canvasId = canvasId;
@ -200,16 +200,20 @@ class Renderer {
if (this.chunkLoader) { if (this.chunkLoader) {
// destroy old chunks, // destroy old chunks,
// meshes need to get disposed // meshes need to get disposed
this.loadedChunks.forEach((chunk) => { if (this.loadedChunks) {
this.scene.remove(chunk); this.loadedChunks.forEach((chunk) => {
this.objects = [this.plane]; this.scene.remove(chunk);
}); this.objects = [this.plane];
this.chunkLoader.destructor(); });
this.chunkLoader.destructor();
}
} }
this.loadedChunks = new Map();
this.chunkLoader = new ChunkLoader(this.store); this.chunkLoader = new ChunkLoader(this.store);
this.forceNextRender = true;
} }
} }
this.controls.setView(view);
this.forceNextRender = true;
} }
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this