iampeter/pixelplanet
1
Fork 0
forked from ppfun/pixelplanet
Code Pull Requests Activity

render out-of-canvas area in 3D canvas gray

Browse Source
This commit is contained in:
HF 2020-02-02 08:47:06 +01:00
parent 9c97cbf97f
commit 6c5f185631
2 changed files with 41 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/controls/VoxelPainterControls.js
View File

@ -28,6 +28,9 @@ import {
onViewFinishChange,
setViewCoordinates,
} from '../actions';
import {
THREE_CANVAS_HEIGHT,
} from '../core/constants';
// This set of controls performs orbiting, dollying (zooming),
// and panning and smooth moving by keys.
@ -930,7 +933,6 @@ class VoxelPainterControls extends EventDispatcher {
);
// move target to panned location
if (panOffset.length() > 1000) {
panOffset.set(0, 0, 0);
}
@ -939,19 +941,31 @@ class VoxelPainterControls extends EventDispatcher {
} else {
scope.target.add(panOffset);
}
/*
if (scope.target.y < 10.0) {
scope.target.y = 10.0;
}
*/
// clamp to boundaries
const state = scope.store.getState();
const { canvasSize } = state.canvas;
const bound = canvasSize / 2;
scope.target.clamp({
x: -bound,
y: 10,
z: -bound,
}, {
x: bound,
y: THREE_CANVAS_HEIGHT,
z: bound,
});
offset.setFromSpherical(spherical);
// rotate offset back to "camera-up-vector-is-up" space
offset.applyQuaternion(quatInverse);
position.copy(scope.target).add(offset);
scope.object.lookAt(scope.target);
if (scope.enableDamping === true) {

25
src/ui/Renderer3D.js
View File

@ -34,6 +34,8 @@ class Renderer {
objects: Array<Object>;
loadedChunks: Array<Object>;
plane: Object;
oobGeometry: Object;
oobMaterial: Object;
//--
controls: Object;
threeRenderer: Object;
@ -139,6 +141,19 @@ class Renderer {
this.objects.push(plane);
this.plane.position.y = -0.1;
// Out of bounds plane
const oobGeometry = new THREE.PlaneBufferGeometry(
THREE_TILE_SIZE,
THREE_TILE_SIZE,
);
oobGeometry.rotateX(-Math.PI / 2);
oobGeometry.translate(THREE_TILE_SIZE / 2, 0.2, THREE_TILE_SIZE / 2);
const oobMaterial = new THREE.MeshLambertMaterial({
color: '#C4C4C4',
});
this.oobGeometry = oobGeometry;
this.oobMaterial = oobMaterial;
// renderer
const threeRenderer = new THREE.WebGLRenderer({
preserveDrawingBuffer: true,
@ -289,6 +304,7 @@ class Renderer {
0,
z + renderDistance,
);
const chunkMaxXY = canvasSize / THREE_TILE_SIZE;
// console.log(`Get ${xcMin} - ${xcMax} - ${zcMin} - ${zcMax}`);
const curLoadedChunks = [];
for (let zc = zcMin; zc <= zcMax; ++zc) {
@ -296,7 +312,13 @@ class Renderer {
const chunkKey = `${xc}:${zc}`;
curLoadedChunks.push(chunkKey);
if (!loadedChunks.has(chunkKey)) {
const chunk = chunkLoader.getChunk(xc, zc, true);
let chunk = null;
if (xc < 0 || zc < 0 || xc >= chunkMaxXY || zc >= chunkMaxXY) {
// if out of bounds
chunk = new THREE.Mesh(this.oobGeometry, this.oobMaterial);
} else {
chunk = chunkLoader.getChunk(xc, zc, true);
}
if (chunk) {
loadedChunks.set(chunkKey, chunk);
chunk.position.fromArray([
@ -304,7 +326,6 @@ class Renderer {
0,
zc * THREE_TILE_SIZE - canvasSize / 2,
]);
window.chunk = chunk;
scene.add(chunk);
}
}