mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-16 17:31:24 +01:00
refactor: cleaup, format file
This commit is contained in:
Azgaar
parent
3d8aa7c3ca
commit
09efbf0c3e
3 changed files with 67 additions and 58 deletions
16
index.html
16
index.html
|
|
@ -5511,10 +5511,7 @@
|
|||
<button id="markersOverviewRefresh" data-tip="Refresh the Overview screen" class="icon-cw"></button>
|
||||
<input type="hidden" id="addedMarkerType" name="addedMarkerType" value="" />
|
||||
<span id="markerTypeSelectorWrapper">
|
||||
<button
|
||||
id="markerTypeSelector"
|
||||
data-tip="Select marker type for newly added markers."
|
||||
>❓</button>
|
||||
<button id="markerTypeSelector" data-tip="Select marker type for newly added markers.">❓</button>
|
||||
<div id="markerTypeSelectMenu"></div>
|
||||
</span>
|
||||
<button
|
||||
|
|
@ -5676,8 +5673,6 @@
|
|||
<option value="8192">8192x8192px</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div data-tip="Set sun position (x, y, z) to define shadows">
|
||||
<div>Sun position:</div>
|
||||
|
|
@ -5686,8 +5681,6 @@
|
|||
<input id="options3dSunZ" type="number" min="-1500" max="1500" step="100" style="width: 4.7em" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div data-tip="Toggle 3d labels" style="margin: 0.6em 0 0.3em -0.2em">
|
||||
<input id="options3dMeshLabels3d" class="checkbox" type="checkbox" />
|
||||
<label for="options3dMeshLabels3d" class="checkbox-label"><i>Show 3D labels</i></label>
|
||||
|
|
@ -5698,9 +5691,12 @@
|
|||
<label for="options3dMeshSkyMode" class="checkbox-label"><i>Show sky and extend water</i></label>
|
||||
</div>
|
||||
|
||||
<div data-tip="Toggle 3d subdivision. Increases the polygon count. Opening this will take some time. WARNING: Can smooth the sharp points in progress." style="margin: 0.6em 0 0.3em -0.2em">
|
||||
<div
|
||||
data-tip="Increases the polygon count to smooth the sharp points. Please note that it can take some time to calculate"
|
||||
style="margin: 0.6em 0 0.3em -0.2em"
|
||||
>
|
||||
<input id="options3dSubdivide" class="checkbox" type="checkbox" />
|
||||
<label for="options3dSubdivide" class="checkbox-label"><i>Smooth Geometry.</i></label>
|
||||
<label for="options3dSubdivide" class="checkbox-label"><i>Smooth geometry</i></label>
|
||||
</div>
|
||||
|
||||
<div data-tip="Set Sun Color" id="options3dSunColorSection">
|
||||
|
|
|
|||
104
modules/ui/3d.js
104
modules/ui/3d.js
|
|
@ -96,11 +96,11 @@ window.ThreeD = (function () {
|
|||
|
||||
const setScale = function (scale) {
|
||||
options.scale = scale;
|
||||
let vertices = geometry.getAttribute('position');
|
||||
for(let i = 0; i < vertices.count; i++){
|
||||
vertices.setZ(i,getMeshHeight(i));
|
||||
let vertices = geometry.getAttribute("position");
|
||||
for (let i = 0; i < vertices.count; i++) {
|
||||
vertices.setZ(i, getMeshHeight(i));
|
||||
}
|
||||
geometry.setAttribute('position',vertices);
|
||||
geometry.setAttribute("position", vertices);
|
||||
geometry.verticesNeedUpdate = true;
|
||||
geometry.computeVertexNormals();
|
||||
geometry.verticesNeedUpdate = false;
|
||||
|
|
@ -108,11 +108,11 @@ window.ThreeD = (function () {
|
|||
redraw();
|
||||
};
|
||||
|
||||
const setSunColor = function(color){
|
||||
const setSunColor = function (color) {
|
||||
options.sunColor = color;
|
||||
spotLight.color = new THREE.Color(color);
|
||||
render();
|
||||
}
|
||||
};
|
||||
|
||||
const setResolutionScale = function (scale) {
|
||||
options.resolutionScale = scale;
|
||||
|
|
@ -167,10 +167,10 @@ window.ThreeD = (function () {
|
|||
}
|
||||
};
|
||||
|
||||
const toggle3dSubdivision = function(){
|
||||
const toggle3dSubdivision = function () {
|
||||
options.subdivide = !options.subdivide;
|
||||
redraw();
|
||||
}
|
||||
};
|
||||
|
||||
const toggleWireframe = function () {
|
||||
options.wireframe = !options.wireframe;
|
||||
|
|
@ -275,7 +275,11 @@ window.ThreeD = (function () {
|
|||
context2d.fillStyle = color;
|
||||
context2d.fillText(text, 0, size * quality);
|
||||
|
||||
return textureToSprite(context2d.canvas.toDataURL(), context2d.canvas.width / quality, context2d.canvas.height / quality);
|
||||
return textureToSprite(
|
||||
context2d.canvas.toDataURL(),
|
||||
context2d.canvas.width / quality,
|
||||
context2d.canvas.height / quality
|
||||
);
|
||||
}
|
||||
|
||||
function get3dCoords(baseX, baseY) {
|
||||
|
|
@ -332,8 +336,20 @@ window.ThreeD = (function () {
|
|||
city_icon_material.wireframe = options.wireframe;
|
||||
const town_icon_material = new THREE.MeshPhongMaterial({color: townOptions.iconColor});
|
||||
town_icon_material.wireframe = options.wireframe;
|
||||
const city_icon_geometry = new THREE.CylinderGeometry(cityOptions.iconSize * 2, cityOptions.iconSize * 2, cityOptions.iconSize, 16, 1);
|
||||
const town_icon_geometry = new THREE.CylinderGeometry(townOptions.iconSize * 2, townOptions.iconSize * 2, townOptions.iconSize, 16, 1);
|
||||
const city_icon_geometry = new THREE.CylinderGeometry(
|
||||
cityOptions.iconSize * 2,
|
||||
cityOptions.iconSize * 2,
|
||||
cityOptions.iconSize,
|
||||
16,
|
||||
1
|
||||
);
|
||||
const town_icon_geometry = new THREE.CylinderGeometry(
|
||||
townOptions.iconSize * 2,
|
||||
townOptions.iconSize * 2,
|
||||
townOptions.iconSize,
|
||||
16,
|
||||
1
|
||||
);
|
||||
const line_material = new THREE.LineBasicMaterial({color: cityOptions.iconColor});
|
||||
|
||||
// burg labels
|
||||
|
|
@ -422,14 +438,14 @@ window.ThreeD = (function () {
|
|||
lines = [];
|
||||
}
|
||||
|
||||
async function createMeshTextureUrl(){
|
||||
return new Promise(async (resolve, reject)=>{
|
||||
async function createMeshTextureUrl() {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
const mapOptions = {
|
||||
noLabels: options.labels3d,
|
||||
noWater: options.extendedWater,
|
||||
fullMap: true
|
||||
};
|
||||
const url = await getMapURL("mesh",mapOptions);
|
||||
const url = await getMapURL("mesh", mapOptions);
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
canvas.width = options.resolutionScale;
|
||||
|
|
@ -437,53 +453,50 @@ window.ThreeD = (function () {
|
|||
const img = new Image();
|
||||
img.src = url;
|
||||
|
||||
img.onload = function(){
|
||||
ctx.drawImage(img,0,0,canvas.width,canvas.height);
|
||||
canvas.toBlob((blob)=>{
|
||||
const blobObj = window.URL.createObjectURL(blob)
|
||||
window.setTimeout(()=>{
|
||||
img.onload = function () {
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
canvas.toBlob(blob => {
|
||||
const blobObj = window.URL.createObjectURL(blob);
|
||||
window.setTimeout(() => {
|
||||
canvas.remove();
|
||||
window.URL.revokeObjectURL(blobObj);
|
||||
}, 100);
|
||||
resolve(blobObj);
|
||||
})
|
||||
}
|
||||
})
|
||||
});
|
||||
};
|
||||
});
|
||||
}
|
||||
// create a mesh from pixel data
|
||||
async function createMesh(width, height, segmentsX, segmentsY) {
|
||||
|
||||
if (texture) texture.dispose();
|
||||
if(!options.wireframe){
|
||||
//Try loading skin texture.
|
||||
texture = new THREE.TextureLoader().load(await createMeshTextureUrl(), render);
|
||||
texture.needsUpdate = true;
|
||||
texture.anisotropy = Renderer.capabilities.getMaxAnisotropy();
|
||||
if (!options.wireframe) {
|
||||
texture = new THREE.TextureLoader().load(await createMeshTextureUrl(), render);
|
||||
texture.needsUpdate = true;
|
||||
texture.anisotropy = Renderer.capabilities.getMaxAnisotropy();
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (material) material.dispose();
|
||||
if(options.wireframe){
|
||||
material = new THREE.MeshLambertMaterial();
|
||||
material = new THREE.MeshLambertMaterial();
|
||||
|
||||
if (options.wireframe) {
|
||||
material.wireframe = true;
|
||||
}else{
|
||||
material = new THREE.MeshLambertMaterial();
|
||||
} else {
|
||||
material.map = texture;
|
||||
material.transparent = true;
|
||||
}
|
||||
|
||||
|
||||
if (geometry) geometry.dispose();
|
||||
geometry = new THREE.PlaneGeometry(width, height, segmentsX - 1, segmentsY - 1);
|
||||
let vertices = geometry.getAttribute('position');
|
||||
for(let i = 0; i < vertices.count; i++){
|
||||
vertices.setZ(i,getMeshHeight(i));
|
||||
|
||||
let vertices = geometry.getAttribute("position");
|
||||
for (let i = 0; i < vertices.count; i++) {
|
||||
vertices.setZ(i, getMeshHeight(i));
|
||||
}
|
||||
geometry.setAttribute('position',vertices);
|
||||
|
||||
geometry.setAttribute("position", vertices);
|
||||
geometry.computeVertexNormals();
|
||||
if (mesh) scene.remove(mesh);
|
||||
if(options.subdivide){
|
||||
if (options.subdivide) {
|
||||
await loadLoopSubdivision();
|
||||
const subdivideParams = {
|
||||
split: true,
|
||||
|
|
@ -492,9 +505,9 @@ window.ThreeD = (function () {
|
|||
flatOnly: false,
|
||||
maxTriangles: Infinity
|
||||
};
|
||||
const smoothGeometry = loopSubdivision.modify(geometry,1,subdivideParams);
|
||||
const smoothGeometry = loopSubdivision.modify(geometry, 1, subdivideParams);
|
||||
mesh = new THREE.Mesh(smoothGeometry, material);
|
||||
}else{
|
||||
} else {
|
||||
mesh = new THREE.Mesh(geometry, material);
|
||||
}
|
||||
mesh.rotation.x = -Math.PI / 2;
|
||||
|
|
@ -548,7 +561,10 @@ window.ThreeD = (function () {
|
|||
|
||||
// scene
|
||||
scene = new THREE.Scene();
|
||||
scene.background = new THREE.TextureLoader().load("https://i0.wp.com/azgaar.files.wordpress.com/2019/10/stars-1.png", render);
|
||||
scene.background = new THREE.TextureLoader().load(
|
||||
"https://i0.wp.com/azgaar.files.wordpress.com/2019/10/stars-1.png",
|
||||
render
|
||||
);
|
||||
|
||||
// Renderer
|
||||
Renderer = new THREE.WebGLRenderer({canvas, antialias: true, preserveDrawingBuffer: true});
|
||||
|
|
@ -663,7 +679,7 @@ window.ThreeD = (function () {
|
|||
});
|
||||
}
|
||||
|
||||
function loadLoopSubdivision(){
|
||||
function loadLoopSubdivision() {
|
||||
if (window.loopSubdivision) return Promise.resolve(true);
|
||||
|
||||
return new Promise(resolve => {
|
||||
|
|
|
|||
|
|
@ -2,11 +2,8 @@
|
|||
|
||||
// version and caching control
|
||||
|
||||
|
||||
|
||||
const version = "1.89.39"; // generator version, update each time
|
||||
|
||||
|
||||
{
|
||||
document.title += " v" + version;
|
||||
const loadingScreenVersion = document.getElementById("versionText");
|
||||
|
|
@ -32,7 +29,7 @@ const version = "1.89.39"; // generator version, update each time
|
|||
|
||||
<ul>
|
||||
<strong>Latest changes:</strong>
|
||||
<li>New 3D Scene options and quality improvements.</li>
|
||||
<li>New 3D scene options</li>
|
||||
<li>Autosave feature (in Options)</li>
|
||||
<li>Google translation support (in Options)</li>
|
||||
<li>Religions can be edited and redrawn like cultures</li>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue