search

minorua / Qgis2threejs

3D map visualization and web export plugin for QGIS
http://minorua.github.io/Qgis2threejs/docs/
504 stars 92 forks source link

GUI Implementations #126

Closed DigDigDig closed 5 years ago

DigDigDig commented 6 years ago

Hey All,

I've seen some cool projects posted by Qgis2threejs users. Some of these use the out-of-the box GUI, while others have made custom GUI setups.

I'm in the process of redesigning the interface for my 3D map products and was hoping to solicit some ideas from the wider community.

I thought that this would be a good place to share some of our implementations and generate discussion about what works and what doesn't.

My current setup uses some pretty standard Jquery GUI elements like so:

image

My visualizations typically have a lot of point and polygon layers that need to get turned on and off. These are handled with the menu on the left-hand side, but they can get a little unwieldy to navigate through.

I also include a set of predefined camera positions that you can rotate thorough to highlight specific areas of interest. This is implemented by specifying a new camera location and then pushing it through a Tween.js function for smooth motion from the current camera position to the new position.

image

I'll often include image hrefs embedded into the attribute table.

image

These insets can be blown up with a little lightbox function.

image

I'd love to see what some other people are doing with this plugin, please share any cool things that you've done below. I hope we can turn this into a productive thread!

nmalawskey commented 6 years ago

Your UI is actually pretty clean. Here's an application I've been working on for most the last week (part of a larger project I've been working on).

By way of background I'm a journalist who has been trying to find a way to display the development of the local city's skyline over a 100 year span. Ended up using qgis2three js for a basemap, then layering a D3 chart to show building clustering by year and a juquery UI slider to change years.

There's some custom camera work, polygon and collada model manipulation (color, location) involved, as well as manually editing the plug-in built javascript files.

I'm still tweaking some of it, but the mechanics are all done.

I had no background in three.js going into this project, but used jquery and D3 quite often. (was actually planning on posting a QGIS2ThreeJS TiL post here once I'm complete).

Link: https://s3.amazonaws.com/threejsmal/historic_3d_2/historic2.html

DigDigDig commented 6 years ago

@nmalawskey I like the concept here.

I keep wanting to click that timeline and use it as a navigation feature. is that something that you have planned in the future? To me that would be a lot more intuitive then navigating via the year slider on the left. You could even do away with that slider if you just integrated nav functionality into your lower display.

You might also consider reducing the vertical real estate that the timeline takes up. You could probably get away with halving the height of it and letting the user see more of the city layout at any given time.

Maybe something like this would get some of the GUI out of your way and allow the visual to shine more:

untitled-1

Or if you were feeling really spiffy you could tie the control to your mouse wheel and guide your tour that way. Here's a cool example and a 'how we did it' link.

https://www.nationalgeographic.com/magazine/2017/06/nodosaur-3d-interactive-dinosaur-fossil/

https://source.opennews.org/articles/resurrecting-dragon/

nmalawskey commented 6 years ago

Hey thanks! I'm not a graphic artist, I'm a writer (and the only guy in the office who is willing to do code) ... so yeah. Feed back (especially constructive) is always appreciated. I had the same comment re: slider in our office test group, so it's on my radar. I had implemented that in an earlier version, but took it out after someone said it wasn't intuitive enough (shrug). I also like the idea of a scoller, but I've had mixed results with those...

the other thing is that the labels tend to clutter (a lot) when there's more than 4 or 5 in the view at once, so still not sure what's the best thing to do there. Maybe make the text a little smaller, remove the white background and display them all down the right hand side in columns.

Anyway, thanks for the comments.

The other one did is just a quick project explainer. It uses a text overlay, camera panning and some other tricks to walk through the project I am writing about.

brianh94 commented 6 years ago

@DigDigDig I'm a big fan of your GUI, very clean. I'm not very familiar with jQuery, I'll definitely look into it. Is your project hosted somewhere? I'd love to check it out.