Added 3D preview to Heightmap editor

This commit is contained in:
Evolvedexperiment 2019-10-15 12:48:52 +00:00
parent a99e81035c
commit 6a10692b22
8 changed files with 51136 additions and 2 deletions

View file

@ -36,6 +36,7 @@ function editHeightmap() {
document.getElementById("applyTemplate").addEventListener("click", openTemplateEditor);
document.getElementById("convertImage").addEventListener("click", openImageConverter);
document.getElementById("heightmapPreview").addEventListener("click", toggleHeightmapPreview);
document.getElementById("heightmap3DView").addEventListener("click", toggleHeightmap3dView);
document.getElementById("finalizeHeightmap").addEventListener("click", finalizeHeightmap);
document.getElementById("renderOcean").addEventListener("click", mockHeightmap);
document.getElementById("templateUndo").addEventListener("click", () => restoreHistory(edits.n-1));
@ -124,6 +125,8 @@ function getHeight(h) {
restartHistory();
if (document.getElementById("preview")) document.getElementById("preview").remove();
if (document.getElementById("_3dpreview")) { toggleHeightmap3dView(); };
const mode = heightmapEditMode.innerHTML;
if (mode === "erase") regenerateErasedData();
@ -368,6 +371,9 @@ function getHeight(h) {
mockHeightmap();
updateHistory();
hideCircle();
update3dpreview(_3dpreview);
showCircle();
}
// draw or update heightmap
@ -408,6 +414,7 @@ function getHeight(h) {
if (!noStat) updateStatistics();
if (document.getElementById("preview")) drawHeightmapPreview(); // update heightmap preview if opened
if (document.getElementById("_3dpreview")) draw3dPreview(); // update 3d heightmap preview if opened
}
// restoreHistory
@ -421,6 +428,7 @@ function getHeight(h) {
updateStatistics();
if (document.getElementById("preview")) drawHeightmapPreview(); // update heightmap preview if opened
if (document.getElementById("_3dpreview")) draw3dPreview(); // update 3d heightmap preview if opened
}
// restart edits from 1st step
@ -860,6 +868,7 @@ function getHeight(h) {
updateStatistics();
mockHeightmap();
update3dpreview(document.getElementById("_3dpreview"));
}
function downloadTemplate() {
@ -1210,4 +1219,50 @@ function getHeight(h) {
}
}
function draw3dPreview() {
var _3dpreview = document.getElementById("_3dpreview");
hideCircle();
update3dpreview(_3dpreview);
showCircle();
}
function close3dPreview() {
if (document.getElementById("_3dpreview")) {
stop3dpreview();
document.getElementById("_3dpreview").remove();
}
}
function toggleHeightmap3dView() {
if (document.getElementById("_3dpreview")) {
close3dPreview();
$("#_3dpreviewEditor").dialog("close");
return;
}
var _3dpreview = document.createElement("canvas");
_3dpreview.id = "_3dpreview";
_3dpreview.top = 0;
_3dpreview.left = 0;
_3dpreview.width = 800;
_3dpreview.height = 800 / (graphWidth / graphHeight);
$("#_3dpreviewEditor").dialog({
title: "3D Preview", width: _3dpreview.width, height: _3dpreview.height+50, resizable: true,
resizeStop: function(event, ui) {
var _3dpreview = document.getElementById("_3dpreview");
_3dpreview.width = ui.size.width;
_3dpreview.height = ui.size.height-50;
update3dpreview(_3dpreview);
}
}).on('dialogclose', close3dPreview);
start3dpreview(_3dpreview);
var _3dpreviewContainer = document.getElementById("_3dpreviewContainer");
_3dpreviewContainer.appendChild(_3dpreview);
}
}