Exploring the HTML structure for Three.js applications
In this section, we’ll look at the source of the geometries.html file. You can do this by looking at the source in the browser or opening the file from the dist/chapter-1 folder in the same location where you downloaded the source for this book:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0;
}
</style>
<script defer src="../js/vendors-node_modules_three_
build_three_module_js.js"></script>
<script defer src="../js/vendors-node_modules_lil-gui_
dist_lil-gui_esm_js.js"></script>
<script defer src="../js/vendors-node_modules_three_
examples_jsm_controls_OrbitControls_js.js"></script>
<script defer src="../js/geometries.js"></script>
</head>
<body>
</body>
</html>
This code is generated when you run the npm run build step. This will combine all the sources and external libraries you’ve used into separate source files (called bundles) and add them to this page. So, you don’t need to do this yourself. The first three <script> tags refer to any of the external libraries we use. Later in the book, we’ll introduce other libraries such as React.js and Tween.js. Those will be included in the same manner automatically. The only other elements here are <style> and <body>. <style> is used to disable any margins in the page, so we can use the complete browser viewport to show our 3D scenes. Furthermore, we’ll add the 3D scene programmatically into an empty <body> element, which we’ll explain in the next section.
If you do want to add custom HTML elements here, you can, of course, do that. In the root of the downloaded code, you’ll find a template.html file, which is used by the build process to create the individual HTML files for the examples. Anything you add there will be added to all the examples. We won’t dive too deep into how this works since that’s outside the scope of this book. However, if you want to learn more about how this works, a couple of good resources on webpack (which we use for this) are as follows:
- The getting started with webpack guide: https://webpack.js.org/guides/getting-started/. This site contains a tutorial that explains the reason why we need webpack for JavaScript development, and how the basic concepts work.
- Information on the HTML webpack plugin: https://github.com/jantimon/html-webpack-plugin. Here, you can find information on the webpack plugin we use to combine the sources into the separate HTML pages you see when you open the browser after running
npm run buildand then runningnpmrun serve.
Note that we don’t have to explicitly initialize our scene or call JavaScript. Whenever we open this page and the geometries.js file is loaded, the JavaScript from that file will run and create our 3D scene.
Now that we’ve set up the basic structure, we can create and render our first scene.
