Google Maps provides an API that we can use to show maps of specific areas in our own web pages as an iframe. As iframes are just normal HTML elements, we can transform these with Three.js using CSS3DRenderer.
Let's first look at the example that we're going to create in this section.
In the previous screenshot (the
06.02-google-maps-cube.html file), you see a 3D cube where each side shows a map from Google Maps. By entering coordinates at the bottom, you can change each side of the cube. To do this, we need to perform the following steps: