forked from ppfun/pixelplanet
use url coordinates on 3D canvas
This commit is contained in:
parent
a8cbe93390
commit
d031412fa1
Binary file not shown.
Before Width: | Height: | Size: 36 KiB |
|
@ -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();
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue
Block a user