O'Reilly logo

Three.js Essentials by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating an interactive 3D Google Maps cube

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.

Creating an interactive 3D Google Maps cube

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:

  • First, we need to get the HTML code for the maps to be shown. We'll ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required