forked from ppfun/pixelplanet
ratelimit raycast-intersects on 3d canvas, unsetHover correctly, etc.
(3d canvas still broken)
This commit is contained in:
parent
4bef680735
commit
0abefce305
|
@ -34,6 +34,7 @@ import {
|
||||||
} from '../core/constants';
|
} from '../core/constants';
|
||||||
import {
|
import {
|
||||||
setHover,
|
setHover,
|
||||||
|
unsetHover,
|
||||||
selectColor,
|
selectColor,
|
||||||
} from '../store/actions';
|
} from '../store/actions';
|
||||||
import pixelTransferController from './PixelTransferController';
|
import pixelTransferController from './PixelTransferController';
|
||||||
|
@ -45,6 +46,7 @@ class Renderer3D extends Renderer {
|
||||||
camera;
|
camera;
|
||||||
// position camera is looking at
|
// position camera is looking at
|
||||||
target = new Vector3();
|
target = new Vector3();
|
||||||
|
// red voxel cursor cube
|
||||||
rollOverMesh;
|
rollOverMesh;
|
||||||
objects;
|
objects;
|
||||||
loadedChunks;
|
loadedChunks;
|
||||||
|
@ -54,12 +56,13 @@ class Renderer3D extends Renderer {
|
||||||
//--
|
//--
|
||||||
threeRenderer;
|
threeRenderer;
|
||||||
// temp variables for mouse events
|
// temp variables for mouse events
|
||||||
mouse;
|
mouse = new Vector2();
|
||||||
mouseMoveStart;
|
mouseMoveStart;
|
||||||
raycaster;
|
raycaster = new Raycaster();
|
||||||
pressTime;
|
pressTime;
|
||||||
pressCdTime;
|
pressCdTime;
|
||||||
multitap;
|
multitap = 0;
|
||||||
|
lastIntersect = 0;
|
||||||
|
|
||||||
constructor(store) {
|
constructor(store) {
|
||||||
super(store);
|
super(store);
|
||||||
|
@ -133,11 +136,6 @@ class Renderer3D extends Renderer {
|
||||||
const gridHelper = new InfiniteGridHelper(1, 10);
|
const gridHelper = new InfiniteGridHelper(1, 10);
|
||||||
scene.add(gridHelper);
|
scene.add(gridHelper);
|
||||||
|
|
||||||
//
|
|
||||||
this.raycaster = new Raycaster();
|
|
||||||
this.mouse = new Vector2();
|
|
||||||
this.multitap = 0;
|
|
||||||
|
|
||||||
// Plane Floor
|
// Plane Floor
|
||||||
const geometry = new PlaneBufferGeometry(1024, 1024);
|
const geometry = new PlaneBufferGeometry(1024, 1024);
|
||||||
geometry.rotateX(-Math.PI / 2);
|
geometry.rotateX(-Math.PI / 2);
|
||||||
|
@ -379,7 +377,10 @@ class Renderer3D extends Renderer {
|
||||||
if (this.forceNextRender) {
|
if (this.forceNextRender) {
|
||||||
this.reloadChunks();
|
this.reloadChunks();
|
||||||
}
|
}
|
||||||
if (this.forceNextRender || this.forceNextSubRender || controlUpdate) {
|
if (this.forceNextRender
|
||||||
|
|| this.forceNextSubrender
|
||||||
|
|| controlUpdate
|
||||||
|
) {
|
||||||
if (this.forceNextRender) {
|
if (this.forceNextRender) {
|
||||||
if (this.lol !== 'force') {
|
if (this.lol !== 'force') {
|
||||||
console.log(this.lol, this.lola);
|
console.log(this.lol, this.lola);
|
||||||
|
@ -387,7 +388,7 @@ class Renderer3D extends Renderer {
|
||||||
this.lola = 0;
|
this.lola = 0;
|
||||||
}
|
}
|
||||||
this.lola += 1;
|
this.lola += 1;
|
||||||
} else if (this.forceNextSubRender) {
|
} else if (this.forceNextSubrender) {
|
||||||
if (this.lol !== 'sub') {
|
if (this.lol !== 'sub') {
|
||||||
console.log(this.lol, this.lola);
|
console.log(this.lol, this.lola);
|
||||||
this.lol = 'sub';
|
this.lol = 'sub';
|
||||||
|
@ -402,9 +403,10 @@ class Renderer3D extends Renderer {
|
||||||
}
|
}
|
||||||
this.lola += 1;
|
this.lola += 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.threeRenderer.render(this.scene, this.camera);
|
this.threeRenderer.render(this.scene, this.camera);
|
||||||
this.forceNextRender = false;
|
this.forceNextRender = false;
|
||||||
this.forceNextSubRender = false;
|
this.forceNextSubrender = false;
|
||||||
} else {
|
} else {
|
||||||
if (this.lol !== 'skip') {
|
if (this.lol !== 'skip') {
|
||||||
console.log(this.lol, this.lola);
|
console.log(this.lol, this.lola);
|
||||||
|
@ -421,35 +423,28 @@ class Renderer3D extends Renderer {
|
||||||
this.threeRenderer.setSize(window.innerWidth, window.innerHeight);
|
this.threeRenderer.setSize(window.innerWidth, window.innerHeight);
|
||||||
}
|
}
|
||||||
|
|
||||||
onDocumentMouseMove(event) {
|
updateRollOverMesh(sx, sy) {
|
||||||
event.preventDefault();
|
// 25ms break between intersects
|
||||||
|
const time = Date.now();
|
||||||
|
if (this.lastIntersect + 25 > time) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.lastIntersect = time;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
clientX,
|
|
||||||
clientY,
|
|
||||||
} = event;
|
|
||||||
const {
|
|
||||||
innerWidth,
|
|
||||||
innerHeight,
|
|
||||||
} = window;
|
|
||||||
const {
|
|
||||||
camera,
|
|
||||||
objects,
|
|
||||||
raycaster,
|
|
||||||
mouse,
|
|
||||||
rollOverMesh,
|
|
||||||
store,
|
store,
|
||||||
|
rollOverMesh,
|
||||||
|
raycaster,
|
||||||
|
objects,
|
||||||
|
mouse,
|
||||||
|
camera,
|
||||||
} = this;
|
} = this;
|
||||||
const state = store.getState();
|
const state = store.getState();
|
||||||
const {
|
const {
|
||||||
fetchingPixel,
|
fetchingPixel,
|
||||||
} = state.fetching;
|
} = state.fetching;
|
||||||
|
|
||||||
mouse.set(
|
mouse.set(sx, sy);
|
||||||
(clientX / innerWidth) * 2 - 1,
|
|
||||||
-(clientY / innerHeight) * 2 + 1,
|
|
||||||
);
|
|
||||||
|
|
||||||
console.log('move mouse');
|
|
||||||
raycaster.setFromCamera(mouse, camera);
|
raycaster.setFromCamera(mouse, camera);
|
||||||
const intersects = raycaster.intersectObjects(objects);
|
const intersects = raycaster.intersectObjects(objects);
|
||||||
if (intersects.length > 0) {
|
if (intersects.length > 0) {
|
||||||
|
@ -462,26 +457,35 @@ class Renderer3D extends Renderer {
|
||||||
|| target.clone().sub(camera.position).length() > 120
|
|| target.clone().sub(camera.position).length() > 120
|
||||||
) {
|
) {
|
||||||
if (rollOverMesh.position.y !== -10) {
|
if (rollOverMesh.position.y !== -10) {
|
||||||
// unsetHover ?
|
this.store.dispatch(unsetHover());
|
||||||
rollOverMesh.position.y = -10;
|
rollOverMesh.position.y = -10;
|
||||||
this.forceNextSubRender = true;
|
this.forceNextSubrender = true;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
const { hover: prevHover } = state.canvas;
|
const { hover: prevHover } = state.canvas;
|
||||||
rollOverMesh.position.copy(target);
|
rollOverMesh.position.copy(target);
|
||||||
const hover = target.toArray().map((u) => Math.floor(u));
|
const hover = target.toArray().map((u) => Math.floor(u));
|
||||||
if (!prevHover
|
if (!prevHover
|
||||||
|| prevHover[0] !== hover[0]
|
|| (prevHover[0] !== hover[0]
|
||||||
|| prevHover[1] !== hover[1]
|
|| prevHover[1] !== hover[1]
|
||||||
|| prevHover[2] !== hover[2]
|
|| prevHover[2] !== hover[2])
|
||||||
) {
|
) {
|
||||||
this.store.dispatch(setHover(hover));
|
this.store.dispatch(setHover(hover));
|
||||||
this.forceNextSubRender = true;
|
this.forceNextSubrender = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onDocumentMouseMove(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
this.updateRollOverMesh(
|
||||||
|
(event.clientX / window.innerWidth) * 2 - 1,
|
||||||
|
-(event.clientY / window.innerHeight) * 2 + 1,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
onDocumentMouseDownOrTouchStart() {
|
onDocumentMouseDownOrTouchStart() {
|
||||||
this.pressTime = Date.now();
|
this.pressTime = Date.now();
|
||||||
const state = this.store.getState();
|
const state = this.store.getState();
|
||||||
|
@ -489,39 +493,7 @@ class Renderer3D extends Renderer {
|
||||||
}
|
}
|
||||||
|
|
||||||
onDocumentTouchMove() {
|
onDocumentTouchMove() {
|
||||||
const {
|
this.updateRollOverMesh(0, 0);
|
||||||
camera,
|
|
||||||
objects,
|
|
||||||
raycaster,
|
|
||||||
mouse,
|
|
||||||
rollOverMesh,
|
|
||||||
store,
|
|
||||||
} = this;
|
|
||||||
const {
|
|
||||||
fetchingPixel,
|
|
||||||
} = store.getState().fetching;
|
|
||||||
|
|
||||||
mouse.set(0, 0);
|
|
||||||
raycaster.setFromCamera(mouse, camera);
|
|
||||||
const intersects = raycaster.intersectObjects(objects);
|
|
||||||
if (intersects.length > 0) {
|
|
||||||
const intersect = intersects[0];
|
|
||||||
const target = intersect.point.clone()
|
|
||||||
.add(intersect.face.normal.multiplyScalar(0.5))
|
|
||||||
.floor()
|
|
||||||
.addScalar(0.5);
|
|
||||||
// TODO make rollOverMesh in a different color while fetchingPixel
|
|
||||||
// instead of hiding it.... we can now queue Voxels
|
|
||||||
if (fetchingPixel
|
|
||||||
|| target.clone().sub(camera.position).length() > 50) {
|
|
||||||
rollOverMesh.position.y = -10;
|
|
||||||
} else {
|
|
||||||
rollOverMesh.position.copy(target);
|
|
||||||
const hover = target
|
|
||||||
.toArray().map((u) => Math.floor(u));
|
|
||||||
this.store.dispatch(setHover(hover));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
placeVoxel(x, y, z, color = null) {
|
placeVoxel(x, y, z, color = null) {
|
||||||
|
@ -643,6 +615,9 @@ class Renderer3D extends Renderer {
|
||||||
}
|
}
|
||||||
|
|
||||||
const [px, py, pz] = this.mouseMoveStart;
|
const [px, py, pz] = this.mouseMoveStart;
|
||||||
|
if (!state.canvas.hover) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
const [qx, qy, qz] = state.canvas.hover;
|
const [qx, qy, qz] = state.canvas.hover;
|
||||||
if (px !== qx || py !== qy || pz !== qz) {
|
if (px !== qx || py !== qy || pz !== qz) {
|
||||||
return;
|
return;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user