Three.js is a free and open-source library for WebGL-based web-development.
Here, we go over the basics of first setting-up a site, like this one, to utilize Three.js and display a WebGL Viewport with a
<canvas> DOM element in a contemporary web-browser. As relatively simple as it is to get started, there's a few caveats to making things look "nice" and having your site be reactive (read: able to scale dynamically as the browser's viewport shape changes).
<canvas> element(s) in the DOM. This is an important concept to keep in mind as we go forward. A lot of the "tricks" for scaling your WebGL viewport rely on being able to appropriately integrate the current state and shape of the browser's viewport into your calculations and definitions of your WebGL Viewport, which in turn relies on your WebGL Camera definition.
All sizes are relative ... to what, though? -- that's the tricky part that we're here to try and clarify.
Scalable Canvas and DOM Elements
We're going to use Three.js to create the DOM element(s) for the WebGL Viewports, but that means that we're going to innately be disconnected from the DOM layout and styling. We can get around this though by starting with a default size and then being sure to update (re-scale) the WebGL viewport as the DOM
<canvas> element gets updated and modified by the CSS. It's extra steps, but necessary steps, if we want things to coordinate nicely.
First things first, we want the aspect ratio of the current HTML Viewport (the webpage in the browser), so that we can set our WebGL viewport to share the same aspect ratio. This isn't mandatory, but this value is very useful to compute and hold onto.
const aspect_ratio = window.innerWidth / window.innerHeight;
Remember to note that a
aspect_ratio value to make your site more reactive. In that case, you'd want to do the same calculation but swap
let, to create a mutable (read: able to be modified) instance within the global scope.