Use pack.burgs instead of svg + Icon use style from svg

This commit is contained in:
Rayzeq 2021-06-22 13:26:10 +02:00
parent 6b9210efa5
commit c51f3c6a84

View file

@ -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,67 +264,53 @@ 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')
for (const burg of pack.burgs) {
const [x, y, z] = get3dCoords(label.x.baseVal[0].value, label.y.baseVal[0].value) const x = burg.x - svg.width.baseVal.value/2;
text_mesh.position.set(x, y + 15, z); const y = getMeshHeight(findGridCell(burg.x, burg.y)); // work better than getMeshHeight(burg.cell) but I don't know why
text_mesh.animate = function () { const z = burg.y - svg.height.baseVal.value/2;
this.rotation.copy(camera.rotation);
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')
} }
textMeshs.push(text_mesh) if (burg.capital) {
scene.add(text_mesh); text_mesh.position.set(x, y + 15, z);
} text_mesh.animate = function () {
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);
} }
} else {
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) 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);
} }