backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-22 20:11:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Optionalize 3d labels

Browse source
This commit is contained in:
Rayzeq 2021-06-22 11:24:43 +02:00
parent 52383267a7
commit 6b9210efa5
4 changed files with 91 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

5
index.html
View file

@ -3341,6 +3341,11 @@
<input id="options3dSunZ" type="number" min=-1500 max=1500 step=100 style="width:4.7em"> <input id="options3dSunZ" type="number" min=-1500 max=1500 step=100 style="width:4.7em">
</div> </div>
<div data-tip="Toggle 3d labels" style="margin: .6em 0 .3em -.2em">
<input id="options3dMeshLabels3d" class="checkbox" type="checkbox">
<label for="options3dMeshLabels3d" class="checkbox-label"><i>Show 3d labels</i></label>
</div>
<div data-tip="Toggle sky mode" style="margin: .6em 0 .3em -.2em"> <div data-tip="Toggle sky mode" style="margin: .6em 0 .3em -.2em">
<input id="options3dMeshSkyMode" class="checkbox" type="checkbox"> <input id="options3dMeshSkyMode" class="checkbox" type="checkbox">
<label for="options3dMeshSkyMode" class="checkbox-label"><i>Show sky and extend water</i></label> <label for="options3dMeshSkyMode" class="checkbox-label"><i>Show sky and extend water</i></label>

10
modules/save.js
View file

@ -71,7 +71,7 @@ async function saveJPEG() {
} }
// parse map svg to object url // parse map svg to object url
async function getMapURL(type, subtype) { async function getMapURL(type, options=[]) {
const cloneEl = document.getElementById("map").cloneNode(true); // clone svg const cloneEl = document.getElementById("map").cloneNode(true); // clone svg
cloneEl.id = "fantasyMap"; cloneEl.id = "fantasyMap";
document.body.appendChild(cloneEl); document.body.appendChild(cloneEl);
@ -82,13 +82,13 @@ async function getMapURL(type, subtype) {
const svgDefs = document.getElementById("defElements"); const svgDefs = document.getElementById("defElements");
const isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1; const isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
if (type === "mesh") { if (isFirefox && type === "mesh") clone.select("#oceanPattern").remove();
if (options.includes("globe")) clone.select("#scaleBar").remove();
if (options.includes("noLabels")) {
clone.select("#labels #burgLabels").remove(); clone.select("#labels #burgLabels").remove();
clone.select("#icons #burgIcons").remove(); clone.select("#icons #burgIcons").remove();
} }
if (isFirefox && type === "mesh") clone.select("#oceanPattern").remove(); if (options.includes("noWater")) {
if (subtype === "globe") clone.select("#scaleBar").remove();
if (subtype === "noWater") {
clone.select("#oceanBase").attr("opacity", 0); clone.select("#oceanBase").attr("opacity", 0);
clone.select("#oceanPattern").attr("opacity", 0); clone.select("#oceanPattern").attr("opacity", 0);
} }

142
modules/ui/3d.js
View file

@ -6,7 +6,7 @@
// set default options // set default options
const options = {scale: 50, lightness: .7, shadow: .5, sun: {x: 100, y: 600, z: 1000}, rotateMesh: 0, rotateGlobe: .5, const options = {scale: 50, lightness: .7, shadow: .5, sun: {x: 100, y: 600, z: 1000}, rotateMesh: 0, rotateGlobe: .5,
skyColor: "#9ecef5", waterColor: "#466eab", extendedWater: 0, resolution: 2}; skyColor: "#9ecef5", waterColor: "#466eab", extendedWater: 0, labels3d: 0, resolution: 2};
// set variables // set variables
let Renderer, scene, camera, controls, animationFrame, material, texture, let Renderer, scene, camera, controls, animationFrame, material, texture,
@ -116,6 +116,11 @@ const toggleSky = function() {
redraw(); redraw();
} }
const toggleLabels = function() {
options.labels3d = !options.labels3d;
redraw();
}
const setColors = function(sky, water) { const setColors = function(sky, water) {
options.skyColor = sky; options.skyColor = sky;
scene.background = scene.fog.color = new THREE.Color(sky); scene.background = scene.fog.color = new THREE.Color(sky);
@ -225,8 +230,12 @@ function get3dCoords(x, base_y) {
// create a mesh from pixel data // create a mesh from pixel data
async function createMesh(width, height, segmentsX, segmentsY) { async function createMesh(width, height, segmentsX, segmentsY) {
const url = await getMapURL("mesh", options.extendedWater ? "noWater" : null); const mapOptions = []
if (options.labels3d) mapOptions.push("noLabels");
if (options.extendedWater) mapOptions.push("noWater");
const url = await getMapURL("mesh", mapOptions);
window.setTimeout(() => window.URL.revokeObjectURL(url), 3000); window.setTimeout(() => window.URL.revokeObjectURL(url), 3000);
if (texture) texture.dispose(); if (texture) texture.dispose();
texture = new THREE.TextureLoader().load(url, render); texture = new THREE.TextureLoader().load(url, render);
texture.needsUpdate = true; texture.needsUpdate = true;
@ -263,73 +272,72 @@ async function createMesh(width, height, segmentsX, segmentsY) {
} }
iconMeshs = [] iconMeshs = []
const svg = $('svg#map')[0]; if (options.labels3d) {
console.log(svg) const svg = $('svg#map')[0];
// Labels // Labels
if(layerIsOn("toggleLabels")) { if(layerIsOn("toggleLabels")) {
// Cities labels const cities = $('#viewbox #labels #burgLabels #cities', svg)
const cities = $('#viewbox #labels #burgLabels #cities', svg) for (const label of cities[0].childNodes) {
for (const label of cities[0].childNodes) { const text_mesh = createTextMesh(label.innerHTML, cities.css('font-family'), 25, cities.css('fill')) // cities.data('size')
const text_mesh = createTextMesh(label.innerHTML, cities.css('font-family'), 25, cities.css('fill')) // cities.data('size')
const [x, y, z] = get3dCoords(label.x.baseVal[0].value, label.y.baseVal[0].value)
const [x, y, z] = get3dCoords(label.x.baseVal[0].value, label.y.baseVal[0].value) text_mesh.position.set(x, y + 15, z);
text_mesh.position.set(x, y + 15, z); text_mesh.animate = function () {
text_mesh.animate = function () {
this.rotation.copy(camera.rotation);
}
textMeshs.push(text_mesh)
scene.add(text_mesh);
}
// Town labels
const towns = $('#viewbox #labels #burgLabels #towns', svg)
for (const label of towns[0].childNodes) {
const text_mesh = createTextMesh(label.innerHTML, towns.css('font-family'), 7, towns.css('fill')) // towns.data('size')
const [x, y, z] = get3dCoords(label.x.baseVal[0].value, label.y.baseVal[0].value)
text_mesh.position.set(x, y + 5, z);
text_mesh.animate = function () {
if(this.position.distanceTo(camera.position) > 200) {
this.visible = false;
} else {
this.visible = true;
this.rotation.copy(camera.rotation); this.rotation.copy(camera.rotation);
} }
textMeshs.push(text_mesh)
scene.add(text_mesh);
}
const towns = $('#viewbox #labels #burgLabels #towns', svg)
for (const label of towns[0].childNodes) {
const text_mesh = createTextMesh(label.innerHTML, towns.css('font-family'), 7, towns.css('fill')) // towns.data('size')
const [x, y, z] = get3dCoords(label.x.baseVal[0].value, label.y.baseVal[0].value)
text_mesh.position.set(x, y + 5, z);
text_mesh.animate = function () {
if(this.position.distanceTo(camera.position) > 200) {
this.visible = false;
} else {
this.visible = true;
this.rotation.copy(camera.rotation);
}
}
textMeshs.push(text_mesh)
scene.add(text_mesh);
} }
textMeshs.push(text_mesh)
scene.add(text_mesh);
} }
} // Icons
// Icons if(layerIsOn("toggleIcons")) {
if(layerIsOn("toggleIcons")) { const cities_icon = $('#viewbox #icons #burgIcons #cities', svg)[0]
const cities_icon = $('#viewbox #icons #burgIcons #cities', svg)[0] for (const icon of cities_icon.childNodes) {
for (const icon of cities_icon.childNodes) { const icon_material = new THREE.MeshBasicMaterial({color: 0xcccccc});
const icon_material = new THREE.MeshBasicMaterial({color: 0xcccccc}); const icon_mesh = new THREE.Mesh(
const icon_mesh = new THREE.Mesh( new THREE.SphereGeometry(2, 16, 16),
new THREE.SphereGeometry(2, 16, 16), icon_material
icon_material );
);
icon_mesh.position.set(...get3dCoords(icon.cx.baseVal.value, icon.cy.baseVal.value))
icon_mesh.position.set(...get3dCoords(icon.cx.baseVal.value, icon.cy.baseVal.value))
iconMeshs.push(icon_mesh);
iconMeshs.push(icon_mesh); scene.add(icon_mesh);
scene.add(icon_mesh); }
}
const town_icon = $('#viewbox #icons #burgIcons #towns', svg)[0]
const town_icon = $('#viewbox #icons #burgIcons #towns', svg)[0] for (const icon of town_icon.childNodes) {
for (const icon of town_icon.childNodes) { const icon_material = new THREE.MeshBasicMaterial({color: 0xcccccc});
const icon_material = new THREE.MeshBasicMaterial({color: 0xcccccc}); const icon_mesh = new THREE.Mesh(
const icon_mesh = new THREE.Mesh( new THREE.SphereGeometry(1, 16, 16),
new THREE.SphereGeometry(1, 16, 16), icon_material
icon_material );
);
icon_mesh.position.set(...get3dCoords(icon.cx.baseVal.value, icon.cy.baseVal.value))
icon_mesh.position.set(...get3dCoords(icon.cx.baseVal.value, icon.cy.baseVal.value))
iconMeshs.push(icon_mesh);
iconMeshs.push(icon_mesh); scene.add(icon_mesh);
scene.add(icon_mesh); }
} }
} }
} }
@ -427,7 +435,7 @@ async function updateGlobeTexure(addMesh) {
material.map = texture; material.map = texture;
if (addMesh) addGlobe3dMesh(); if (addMesh) addGlobe3dMesh();
}; };
img2.src = await getMapURL("mesh", "globe");; img2.src = await getMapURL("mesh", ["globe"]);
} }
async function getOBJ() { async function getOBJ() {
@ -497,6 +505,6 @@ function OBJExporter() {
}); });
} }
return {create, redraw, update, stop, options, setScale, setLightness, setSun, setRotation, toggleSky, setResolution, setColors, saveScreenshot, saveOBJ}; return {create, redraw, update, stop, options, setScale, setLightness, setSun, setRotation, toggleLabels, toggleSky, setResolution, setColors, saveScreenshot, saveOBJ};
}))); })));

6
modules/ui/options.js
View file

@ -825,6 +825,7 @@ function toggle3dOptions() {
document.getElementById("options3dMeshRotationNumber").addEventListener("change", changeRotation); document.getElementById("options3dMeshRotationNumber").addEventListener("change", changeRotation);
document.getElementById("options3dGlobeRotationRange").addEventListener("input", changeRotation); document.getElementById("options3dGlobeRotationRange").addEventListener("input", changeRotation);
document.getElementById("options3dGlobeRotationNumber").addEventListener("change", changeRotation); document.getElementById("options3dGlobeRotationNumber").addEventListener("change", changeRotation);
document.getElementById("options3dMeshLabels3d").addEventListener("change", toggleLabels3d);
document.getElementById("options3dMeshSkyMode").addEventListener("change", toggleSkyMode); document.getElementById("options3dMeshSkyMode").addEventListener("change", toggleSkyMode);
document.getElementById("options3dMeshSky").addEventListener("input", changeColors); document.getElementById("options3dMeshSky").addEventListener("input", changeColors);
document.getElementById("options3dMeshWater").addEventListener("input", changeColors); document.getElementById("options3dMeshWater").addEventListener("input", changeColors);
@ -841,6 +842,7 @@ function toggle3dOptions() {
options3dSunZ.value = ThreeD.options.sun.z; options3dSunZ.value = ThreeD.options.sun.z;
options3dMeshRotationRange.value = options3dMeshRotationNumber.value = ThreeD.options.rotateMesh; options3dMeshRotationRange.value = options3dMeshRotationNumber.value = ThreeD.options.rotateMesh;
options3dGlobeRotationRange.value = options3dGlobeRotationNumber.value = ThreeD.options.rotateGlobe; options3dGlobeRotationRange.value = options3dGlobeRotationNumber.value = ThreeD.options.rotateGlobe;
options3dMeshLabels3d.value = ThreeD.options.labels3d;
options3dMeshSkyMode.value = ThreeD.options.extendedWater; options3dMeshSkyMode.value = ThreeD.options.extendedWater;
options3dColorSection.style.display = ThreeD.options.extendedWater ? "block" : "none"; options3dColorSection.style.display = ThreeD.options.extendedWater ? "block" : "none";
options3dMeshSky.value = ThreeD.options.skyColor; options3dMeshSky.value = ThreeD.options.skyColor;
@ -871,6 +873,10 @@ function toggle3dOptions() {
ThreeD.setRotation(speed); ThreeD.setRotation(speed);
} }
function toggleLabels3d() {
ThreeD.toggleLabels();
}
function toggleSkyMode() { function toggleSkyMode() {
const hide = ThreeD.options.extendedWater; const hide = ThreeD.options.extendedWater;
options3dColorSection.style.display = hide ? "none" : "block"; options3dColorSection.style.display = hide ? "none" : "block";