forked from ppfun/pixelplanet
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)
This commit is contained in:
parent
539c5120e7
commit
c6b22cf415
|
@ -62,6 +62,7 @@ const maxDistance = Infinity;
|
||||||
// How far you can orbit vertically, upper and lower limits.
|
// How far you can orbit vertically, upper and lower limits.
|
||||||
// Range is 0 to Math.PI radians.
|
// Range is 0 to Math.PI radians.
|
||||||
const minPolarAngle = 0; // radians
|
const minPolarAngle = 0; // radians
|
||||||
|
// const maxPolarAngle = Math.PI / 2; // don't allow going underground
|
||||||
const maxPolarAngle = Math.PI; // radians
|
const maxPolarAngle = Math.PI; // radians
|
||||||
// How far you can orbit horizontally, upper and lower limits.
|
// How far you can orbit horizontally, upper and lower limits.
|
||||||
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
|
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
|
||||||
|
@ -95,10 +96,6 @@ class VoxelPainterControls {
|
||||||
state;
|
state;
|
||||||
// "target" sets the location of focus, where the object orbits around
|
// "target" sets the location of focus, where the object orbits around
|
||||||
target;
|
target;
|
||||||
// for reset
|
|
||||||
target0;
|
|
||||||
position0;
|
|
||||||
zoom0;
|
|
||||||
//
|
//
|
||||||
// internals
|
// internals
|
||||||
//
|
//
|
||||||
|
@ -144,9 +141,6 @@ class VoxelPainterControls {
|
||||||
//
|
//
|
||||||
this.target = target;
|
this.target = target;
|
||||||
//
|
//
|
||||||
this.target0 = target.clone();
|
|
||||||
this.position0 = camera.position.clone();
|
|
||||||
this.zoom0 = camera.zoom;
|
|
||||||
this.state = STATE.NONE;
|
this.state = STATE.NONE;
|
||||||
|
|
||||||
this.onContextMenu = this.onContextMenu.bind(this);
|
this.onContextMenu = this.onContextMenu.bind(this);
|
||||||
|
@ -693,22 +687,6 @@ class VoxelPainterControls {
|
||||||
return this.spherical.theta;
|
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) {
|
update(force) {
|
||||||
const {
|
const {
|
||||||
moveRight,
|
moveRight,
|
||||||
|
@ -778,7 +756,7 @@ class VoxelPainterControls {
|
||||||
|
|
||||||
this.prevTime = time;
|
this.prevTime = time;
|
||||||
|
|
||||||
offset.copy(camera.position).sub(this.target);
|
offset.copy(camera.position).sub(target);
|
||||||
|
|
||||||
// rotate offset to "y-axis-is-up" space
|
// rotate offset to "y-axis-is-up" space
|
||||||
offset.applyQuaternion(this.quat);
|
offset.applyQuaternion(this.quat);
|
||||||
|
@ -826,7 +804,7 @@ class VoxelPainterControls {
|
||||||
const bound = canvasSize / 2;
|
const bound = canvasSize / 2;
|
||||||
target.clamp({
|
target.clamp({
|
||||||
x: -bound,
|
x: -bound,
|
||||||
y: 10,
|
y: 0,
|
||||||
z: -bound,
|
z: -bound,
|
||||||
}, {
|
}, {
|
||||||
x: bound,
|
x: bound,
|
||||||
|
@ -846,6 +824,7 @@ class VoxelPainterControls {
|
||||||
this.scale = 1;
|
this.scale = 1;
|
||||||
|
|
||||||
if (this.storeViewInStateTime + STORE_UPDATE_DELAY < time) {
|
if (this.storeViewInStateTime + STORE_UPDATE_DELAY < time) {
|
||||||
|
this.storeViewInStateTime = time;
|
||||||
this.renderer.storeViewInState();
|
this.renderer.storeViewInState();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -47,7 +47,7 @@ export default (store) => (next) => (action) => {
|
||||||
|
|
||||||
if (is3D === renderer.is3D) {
|
if (is3D === renderer.is3D) {
|
||||||
renderer.updateCanvasData(state);
|
renderer.updateCanvasData(state);
|
||||||
if (type === 's/RELOAD_URL') {
|
if (type === 'RELOAD_URL') {
|
||||||
renderer.updateView(state.canvas.view);
|
renderer.updateView(state.canvas.view);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -67,7 +67,7 @@ function getViewFromURL(canvases) {
|
||||||
canvasId = DEFAULT_CANVAS_ID;
|
canvasId = DEFAULT_CANVAS_ID;
|
||||||
canvasIdent = canvases[DEFAULT_CANVAS_ID].ident;
|
canvasIdent = canvases[DEFAULT_CANVAS_ID].ident;
|
||||||
}
|
}
|
||||||
const { is3D } = !!canvases[canvasId].v;
|
const is3D = !!canvases[canvasId].v;
|
||||||
|
|
||||||
const x = parseInt(almost[1], 10) || 0;
|
const x = parseInt(almost[1], 10) || 0;
|
||||||
const y = parseInt(almost[2], 10) || 0;
|
const y = parseInt(almost[2], 10) || 0;
|
||||||
|
@ -92,6 +92,7 @@ function getViewFromURL(canvases) {
|
||||||
const initialState = {
|
const initialState = {
|
||||||
canvasId: null,
|
canvasId: null,
|
||||||
canvasIdent: 'xx',
|
canvasIdent: 'xx',
|
||||||
|
canvases: null,
|
||||||
canvasSize: 65536,
|
canvasSize: 65536,
|
||||||
historicalCanvasSize: 65536,
|
historicalCanvasSize: 65536,
|
||||||
is3D: null,
|
is3D: null,
|
||||||
|
@ -158,6 +159,9 @@ export default function canvasReducer(
|
||||||
|
|
||||||
case 'RELOAD_URL': {
|
case 'RELOAD_URL': {
|
||||||
const { canvases } = state;
|
const { canvases } = state;
|
||||||
|
if (!canvases) {
|
||||||
|
return state;
|
||||||
|
}
|
||||||
const urlState = getViewFromURL(canvases);
|
const urlState = getViewFromURL(canvases);
|
||||||
return {
|
return {
|
||||||
...state,
|
...state,
|
||||||
|
|
|
@ -34,7 +34,7 @@ class Renderer {
|
||||||
|
|
||||||
constructor(store) {
|
constructor(store) {
|
||||||
this.store = store;
|
this.store = store;
|
||||||
//this.loadViewFromState();
|
// this.loadViewFromState();
|
||||||
}
|
}
|
||||||
|
|
||||||
get view() {
|
get view() {
|
||||||
|
|
|
@ -72,19 +72,21 @@ class Renderer3D extends Renderer {
|
||||||
constructor(store) {
|
constructor(store) {
|
||||||
super(store);
|
super(store);
|
||||||
this.is3D = true;
|
this.is3D = true;
|
||||||
this.loadViewFromState();
|
|
||||||
const state = store.getState();
|
const state = store.getState();
|
||||||
|
|
||||||
// camera
|
// camera
|
||||||
const camera = new PerspectiveCamera(
|
const camera = new PerspectiveCamera(
|
||||||
45,
|
45,
|
||||||
window.innerWidth / window.innerHeight,
|
window.innerWidth / window.innerHeight,
|
||||||
1,
|
5,
|
||||||
400,
|
600,
|
||||||
);
|
);
|
||||||
camera.position.set(10, 16, 26);
|
|
||||||
camera.lookAt(0, 0, 0);
|
|
||||||
this.camera = camera;
|
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
|
// scene
|
||||||
const scene = new Scene();
|
const scene = new Scene();
|
||||||
|
@ -107,7 +109,6 @@ class Renderer3D extends Renderer {
|
||||||
const sky = new Sky();
|
const sky = new Sky();
|
||||||
sky.scale.setScalar(450000);
|
sky.scale.setScalar(450000);
|
||||||
scene.add(sky);
|
scene.add(sky);
|
||||||
|
|
||||||
scene.fog = new FogExp2(0xffffff, 0.003);
|
scene.fog = new FogExp2(0xffffff, 0.003);
|
||||||
|
|
||||||
const effectController = {
|
const effectController = {
|
||||||
|
@ -185,10 +186,6 @@ class Renderer3D extends Renderer {
|
||||||
domElement,
|
domElement,
|
||||||
store,
|
store,
|
||||||
);
|
);
|
||||||
// TODO doesn't work like this anymore
|
|
||||||
controls.maxPolarAngle = Math.PI / 2;
|
|
||||||
controls.minDistance = 10.00;
|
|
||||||
controls.maxDistance = 100.00;
|
|
||||||
this.controls = controls;
|
this.controls = controls;
|
||||||
|
|
||||||
|
|
||||||
|
@ -239,8 +236,12 @@ class Renderer3D extends Renderer {
|
||||||
if (view.length !== 3) {
|
if (view.length !== 3) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.log('go to', view);
|
const { target } = this;
|
||||||
this.target.set(...view);
|
// 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;
|
this.forceNextRender = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user