Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better cities and towns labels in 3D view #635

Merged
merged 18 commits into from
Jul 17, 2021
Merged

Better cities and towns labels in 3D view #635

Changes from 1 commit
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
5cc2454
Better cities and towns labels in 3D view
Jun 21, 2021
91c1de4
Small changes (let -> const)
Jun 21, 2021
6ceb949
Lower city labels
Jun 21, 2021
280c71b
Change the way the label faces the camera
Jun 21, 2021
ca77e10
Use font from svg instead of hardcoded
Jun 21, 2021
5238326
Use color from svg
Jun 22, 2021
6b9210e
Optionalize 3d labels
Jun 22, 2021
c51f3c6
Use pack.burgs instead of svg + Icon use style from svg
Jun 22, 2021
d874f9a
Replace jQuery with d3
Jun 22, 2021
ab61c30
Labels adapts to height scale
Jun 22, 2021
b871b63
Fix bug: options are not applied when changing layer
Jun 24, 2021
30ab121
Add states labels + Replace canvas by svg
Jun 24, 2021
58ad13c
Fix: States labels adapts to height scale
Jun 25, 2021
143e1df
Requested fixes
Jun 30, 2021
bd4deaa
All fonts working properly + Big memory optimization + Minor fixes
Jul 2, 2021
ba10da7
Fix rotating animation + More optimization
Jul 2, 2021
011c58c
use Raycaster for positioning the labels
Jul 5, 2021
28f3481
Use canvas to render burg labels + Some tweaks
Jul 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 38 additions & 62 deletions modules/ui/3d.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,16 +218,6 @@ function createTextMesh(text, font, size, color) {
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
async function createMesh(width, height, segmentsX, segmentsY) {
const mapOptions = []
Rayzeq marked this conversation as resolved.
Show resolved Hide resolved
Expand Down Expand Up @@ -274,67 +264,53 @@ async function createMesh(width, height, segmentsX, segmentsY) {

if (options.labels3d) {
const svg = $('svg#map')[0];
Rayzeq marked this conversation as resolved.
Show resolved Hide resolved
// Labels
if(layerIsOn("toggleLabels")) {
const cities = $('#viewbox #labels #burgLabels #cities', svg)
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 [x, y, z] = get3dCoords(label.x.baseVal[0].value, label.y.baseVal[0].value)
text_mesh.position.set(x, y + 15, z);
text_mesh.animate = function () {
this.rotation.copy(camera.rotation);
const cities = $('#viewbox #labels #burgLabels #cities', svg);
const towns = $('#viewbox #labels #burgLabels #towns', svg);
const cities_icons = $('#viewbox #icons #burgIcons #cities', svg);
const towns_icons = $('#viewbox #icons #burgIcons #towns', svg);

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')
}

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;

if (burg.capital) {
text_mesh.position.set(x, y + 15, z);
text_mesh.animate = function () {
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);
}
}
// Icons
if(layerIsOn("toggleIcons")) {
const cities_icon = $('#viewbox #icons #burgIcons #cities', svg)[0]
for (const icon of cities_icon.childNodes) {
const icon_material = new THREE.MeshBasicMaterial({color: 0xcccccc});
const icon_mesh = new THREE.Mesh(
new THREE.SphereGeometry(2, 16, 16),
icon_material
);

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});

// Icon
if(layerIsOn("toggleIcons")) {
const icon_material = new THREE.MeshBasicMaterial({color: burg.capital ? cities_icons.attr('fill') : towns_icons.attr('fill')});
const icon_mesh = new THREE.Mesh(
new THREE.SphereGeometry(1, 16, 16),
new THREE.SphereGeometry((burg.capital ? cities_icons.attr("size") : towns_icons.attr("size")) * 2, 16, 16),
icon_material
);

icon_mesh.position.set(...get3dCoords(icon.cx.baseVal.value, icon.cy.baseVal.value))

icon_mesh.position.set(x, y, z)

iconMeshs.push(icon_mesh);
scene.add(icon_mesh);
}
Expand Down