How can I add 3D map as background for page?

Questions
1

Hey hello.

I’m a complete new to three js. I saw this Washington Post article https://www.washingtonpost.com/graphics/2017/world/mapping-the-dmz I’ll like to learn how to do that map. I work with National Parks and something similar will help explain some stuff about our place.

I have been trying to dissect their page, I saw that they use three js. I see that they use a satellite photo and what I have learn are bump maps https://www.washingtonpost.com/graphics/2017/world/mapping-the-dmz/assets/dmz_satellite_nrm_v2.jpg

I have read a bit about bump maps, but I’m sort of lost how to generate them and what will be the right way to procure a blend like that. I’ll like to have a similar 3D like map of my park and bounce scene from scene showing features and letting people play with the map. Can someone point me to a tutorial or give some advice where to start.

Thanks!

1 Like
2

You could look at the various terrain examples to get started.

3

@usematics, I love this Washington Post example. Have you figured out how they did it? Can you share your park example? I need to create a 3d map with text labels.

4

Combining HTML elements like labels with WebGL content could be a task for CSS2DRenderer or CSS3DRenderer:

https://threejs.org/examples/#webgl_loader_pdb

5

Thanks for pointing me in this direction @Mugen87! And is CSS2DRenderer much different from this html based solution? https://stackoverflow.com/a/15257807/4504073

6

Not much. CSS2DRenderer automatically applies the correct translation of the DOM element to the CSS3 transform property. The effect is basically the same. The good thing is, you don’t have to care about it since it is encapsulated in CSS2DRenderer :wink:. So i guess it’s the nicer approach…

1 Like
7

@Mugen87 I don’t know if I should move this question to SO, but I made a fiddle and am trying to get the labels to line up with the boxes. https://jsfiddle.net/lukehatfield/oft1wm3s/66/

8

Seems to work with the latest version of three.js:

https://jsfiddle.net/oft1wm3s/95/

Besides, i’ve refactored your code a bit so it looks more like the official examples :wink:

1 Like
9

Wow, I really appreciate it!!! Thank you. (I probably should have started a new thread with the title HTML labels, or something like that so this can be findable)