mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-23 04:21:24 +01:00
Use pack.burgs instead of svg + Icon use style from svg
This commit is contained in:
parent
6b9210efa5
commit
c51f3c6a84
1 changed files with 38 additions and 62 deletions
|
|
@ -218,16 +218,6 @@ function createTextMesh(text, font, size, color) {
|
||||||
return text_mesh
|
return text_mesh
|
||||||
}
|
}
|
||||||
|
|
||||||
function get3dCoords(x, base_y) {
|
|
||||||
const svg = $('svg#map')[0];
|
|
||||||
|
|
||||||
const y = getMeshHeight(findGridCell(x, base_y));
|
|
||||||
x = x - svg.width.baseVal.value/2;
|
|
||||||
const z = base_y - svg.height.baseVal.value/2;
|
|
||||||
|
|
||||||
return [x, y, z];
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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 mapOptions = []
|
const mapOptions = []
|
||||||
|
|
@ -274,27 +264,29 @@ async function createMesh(width, height, segmentsX, segmentsY) {
|
||||||
|
|
||||||
if (options.labels3d) {
|
if (options.labels3d) {
|
||||||
const svg = $('svg#map')[0];
|
const svg = $('svg#map')[0];
|
||||||
// Labels
|
const cities = $('#viewbox #labels #burgLabels #cities', svg);
|
||||||
if(layerIsOn("toggleLabels")) {
|
const towns = $('#viewbox #labels #burgLabels #towns', svg);
|
||||||
const cities = $('#viewbox #labels #burgLabels #cities', svg)
|
const cities_icons = $('#viewbox #icons #burgIcons #cities', svg);
|
||||||
for (const label of cities[0].childNodes) {
|
const towns_icons = $('#viewbox #icons #burgIcons #towns', svg);
|
||||||
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)
|
for (const burg of pack.burgs) {
|
||||||
|
const x = burg.x - svg.width.baseVal.value/2;
|
||||||
|
const y = getMeshHeight(findGridCell(burg.x, burg.y)); // work better than getMeshHeight(burg.cell) but I don't know why
|
||||||
|
const z = burg.y - svg.height.baseVal.value/2;
|
||||||
|
|
||||||
|
if(layerIsOn("toggleLabels")) {
|
||||||
|
if (burg.capital) {
|
||||||
|
var text_mesh = createTextMesh(burg.name, cities.css('font-family'), 25, cities.css('fill')); // cities.data('size')
|
||||||
|
} else {
|
||||||
|
var text_mesh = createTextMesh(burg.name, towns.css('font-family'), 7, towns.css('fill')); // towns.data('size')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (burg.capital) {
|
||||||
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);
|
this.rotation.copy(camera.rotation);
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
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.position.set(x, y + 5, z);
|
||||||
text_mesh.animate = function () {
|
text_mesh.animate = function () {
|
||||||
if(this.position.distanceTo(camera.position) > 200) {
|
if(this.position.distanceTo(camera.position) > 200) {
|
||||||
|
|
@ -304,36 +296,20 @@ async function createMesh(width, height, segmentsX, segmentsY) {
|
||||||
this.rotation.copy(camera.rotation);
|
this.rotation.copy(camera.rotation);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
textMeshs.push(text_mesh)
|
textMeshs.push(text_mesh);
|
||||||
scene.add(text_mesh);
|
scene.add(text_mesh);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
// Icons
|
// Icon
|
||||||
if(layerIsOn("toggleIcons")) {
|
if(layerIsOn("toggleIcons")) {
|
||||||
const cities_icon = $('#viewbox #icons #burgIcons #cities', svg)[0]
|
const icon_material = new THREE.MeshBasicMaterial({color: burg.capital ? cities_icons.attr('fill') : towns_icons.attr('fill')});
|
||||||
for (const icon of cities_icon.childNodes) {
|
|
||||||
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((burg.capital ? cities_icons.attr("size") : towns_icons.attr("size")) * 2, 16, 16),
|
||||||
icon_material
|
icon_material
|
||||||
);
|
);
|
||||||
|
icon_mesh.position.set(x, y, z)
|
||||||
icon_mesh.position.set(...get3dCoords(icon.cx.baseVal.value, icon.cy.baseVal.value))
|
|
||||||
|
|
||||||
iconMeshs.push(icon_mesh);
|
|
||||||
scene.add(icon_mesh);
|
|
||||||
}
|
|
||||||
|
|
||||||
const town_icon = $('#viewbox #icons #burgIcons #towns', svg)[0]
|
|
||||||
for (const icon of town_icon.childNodes) {
|
|
||||||
const icon_material = new THREE.MeshBasicMaterial({color: 0xcccccc});
|
|
||||||
const icon_mesh = new THREE.Mesh(
|
|
||||||
new THREE.SphereGeometry(1, 16, 16),
|
|
||||||
icon_material
|
|
||||||
);
|
|
||||||
|
|
||||||
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);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue