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.
|
||||
// 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();
|
||||
}
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user