.jpg)
The globe looks and functions great, but it definitely has some issues when scaling down the browser window. The first is, the globe won't stay centered in the middle of the canvas when shrinking down the window on larger screen sizes. The second is, once we get to mobile screen sizes, there's not enough room for our globe to fit on the screen in the first place.
This lesson will teach you how to fix both of these issues using a combination of HTML, event listeners, and Three.js. We'll match the same style used for the globe on github.com by ensuring our globe travels beneath our website's text on smaller screen sizes.
window.addEventListener("resize", onWindowResize, false); function onWindowResize() { camera.aspect = canvasContainer.offsetWidth / canvasContainer.offsetHeight; camera.updateProjectionMatrix(); renderer.setSize(canvasContainer.offsetWidth, canvasContainer.offsetHeight); }