forked from ppfun/pixelplanet
render out-of-canvas area in 3D canvas gray
This commit is contained in:
parent
9c97cbf97f
commit
6c5f185631
|
@ -28,6 +28,9 @@ import {
|
||||||
onViewFinishChange,
|
onViewFinishChange,
|
||||||
setViewCoordinates,
|
setViewCoordinates,
|
||||||
} from '../actions';
|
} from '../actions';
|
||||||
|
import {
|
||||||
|
THREE_CANVAS_HEIGHT,
|
||||||
|
} from '../core/constants';
|
||||||
|
|
||||||
// This set of controls performs orbiting, dollying (zooming),
|
// This set of controls performs orbiting, dollying (zooming),
|
||||||
// and panning and smooth moving by keys.
|
// and panning and smooth moving by keys.
|
||||||
|
@ -930,7 +933,6 @@ class VoxelPainterControls extends EventDispatcher {
|
||||||
);
|
);
|
||||||
|
|
||||||
// move target to panned location
|
// move target to panned location
|
||||||
|
|
||||||
if (panOffset.length() > 1000) {
|
if (panOffset.length() > 1000) {
|
||||||
panOffset.set(0, 0, 0);
|
panOffset.set(0, 0, 0);
|
||||||
}
|
}
|
||||||
|
@ -939,19 +941,31 @@ class VoxelPainterControls extends EventDispatcher {
|
||||||
} else {
|
} else {
|
||||||
scope.target.add(panOffset);
|
scope.target.add(panOffset);
|
||||||
}
|
}
|
||||||
|
/*
|
||||||
if (scope.target.y < 10.0) {
|
if (scope.target.y < 10.0) {
|
||||||
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);
|
offset.setFromSpherical(spherical);
|
||||||
|
|
||||||
// rotate offset back to "camera-up-vector-is-up" space
|
// rotate offset back to "camera-up-vector-is-up" space
|
||||||
offset.applyQuaternion(quatInverse);
|
offset.applyQuaternion(quatInverse);
|
||||||
|
|
||||||
position.copy(scope.target).add(offset);
|
position.copy(scope.target).add(offset);
|
||||||
|
|
||||||
|
|
||||||
scope.object.lookAt(scope.target);
|
scope.object.lookAt(scope.target);
|
||||||
|
|
||||||
if (scope.enableDamping === true) {
|
if (scope.enableDamping === true) {
|
||||||
|
|
|
@ -34,6 +34,8 @@ class Renderer {
|
||||||
objects: Array<Object>;
|
objects: Array<Object>;
|
||||||
loadedChunks: Array<Object>;
|
loadedChunks: Array<Object>;
|
||||||
plane: Object;
|
plane: Object;
|
||||||
|
oobGeometry: Object;
|
||||||
|
oobMaterial: Object;
|
||||||
//--
|
//--
|
||||||
controls: Object;
|
controls: Object;
|
||||||
threeRenderer: Object;
|
threeRenderer: Object;
|
||||||
|
@ -139,6 +141,19 @@ class Renderer {
|
||||||
this.objects.push(plane);
|
this.objects.push(plane);
|
||||||
this.plane.position.y = -0.1;
|
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
|
// renderer
|
||||||
const threeRenderer = new THREE.WebGLRenderer({
|
const threeRenderer = new THREE.WebGLRenderer({
|
||||||
preserveDrawingBuffer: true,
|
preserveDrawingBuffer: true,
|
||||||
|
@ -289,6 +304,7 @@ class Renderer {
|
||||||
0,
|
0,
|
||||||
z + renderDistance,
|
z + renderDistance,
|
||||||
);
|
);
|
||||||
|
const chunkMaxXY = canvasSize / THREE_TILE_SIZE;
|
||||||
// console.log(`Get ${xcMin} - ${xcMax} - ${zcMin} - ${zcMax}`);
|
// console.log(`Get ${xcMin} - ${xcMax} - ${zcMin} - ${zcMax}`);
|
||||||
const curLoadedChunks = [];
|
const curLoadedChunks = [];
|
||||||
for (let zc = zcMin; zc <= zcMax; ++zc) {
|
for (let zc = zcMin; zc <= zcMax; ++zc) {
|
||||||
|
@ -296,7 +312,13 @@ class Renderer {
|
||||||
const chunkKey = `${xc}:${zc}`;
|
const chunkKey = `${xc}:${zc}`;
|
||||||
curLoadedChunks.push(chunkKey);
|
curLoadedChunks.push(chunkKey);
|
||||||
if (!loadedChunks.has(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) {
|
if (chunk) {
|
||||||
loadedChunks.set(chunkKey, chunk);
|
loadedChunks.set(chunkKey, chunk);
|
||||||
chunk.position.fromArray([
|
chunk.position.fromArray([
|
||||||
|
@ -304,7 +326,6 @@ class Renderer {
|
||||||
0,
|
0,
|
||||||
zc * THREE_TILE_SIZE - canvasSize / 2,
|
zc * THREE_TILE_SIZE - canvasSize / 2,
|
||||||
]);
|
]);
|
||||||
window.chunk = chunk;
|
|
||||||
scene.add(chunk);
|
scene.add(chunk);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user