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,
|
||||
|
|
|
@ -34,7 +34,7 @@ class Renderer {
|
|||
|
||||
constructor(store) {
|
||||
this.store = store;
|
||||
//this.loadViewFromState();
|
||||
// this.loadViewFromState();
|
||||
}
|
||||
|
||||
get view() {
|
||||
|
|
|
@ -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