Creating the HTML skeleton

The first thing we need to do is create an empty skeleton page that we can use as the base for all our examples, as follows:

<!DOCTYPE html>

<html>

  <head>
    <title>Example 01.01 - Basic skeleton</title>
    <script src="../libs/three.js"></script>
    <style>
      body{
        /* set margin to 0 and overflow to hidden, to use the complete page */

        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>

    <!-- Div which will hold the Output -->
    <div id="WebGL-output">
    </div>

    <!-- Javascript code that runs our Three.js examples -->
    <script>

      // once everything is loaded, we run our Three.js stuff.
      function init() {
        // here we'll put the Three.js stuff
      };
      window.onload = init;

    </script>
  </body>
</html>

Tip

Downloading the example code

You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

As you can see from this listing, the skeleton is a very simple HTML page, with only a couple of elements. In the <head> element, we load the external JavaScript libraries that we'll use for the examples. For all the examples, we'll at least need to load the Three.js library, three.js. In the <head> element, we also add a couple of lines of CSS. These style elements remove any scrollbars when we create a full-page Three.js scene. In the <body> element of this page, you can see a single <div> element. When we write our Three.js code, we'll point the output of the Three.js renderer to that element. At the bottom of this page, you can already see a bit of JavaScript. By assigning the init function to the window.onload property, we make sure that this function gets called when the HTML document has finished loading. In the init function, we'll insert all the Three.js specific JavaScript.

Three.js comes in two versions:

Three.min.js: This is the library you'd normally use when deploying Three.js sites on the Internet. This is a minified version of Three.js, created using UglifyJS, which is a quarter size of the normal Three.js library. All the examples and code used in this book are based on Three.js r69, which was released in October 2014.
Three.js: This is the normal Three.js library. We use this library in our examples since it makes debugging much easier when you can read and understand the Three.js source code.

If we view this page in our browser, the results aren't very shocking. As you'd expect, all you see is an empty page.

In the next section, you'll learn how to add the first couple of 3D objects and render those to the <div> element we defined in our HTML skeleton.

Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

By : Jos Dirksen

Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

By: Jos Dirksen

Overview of this book

Creating the HTML skeleton

Tip

Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

By : Jos Dirksen

Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

By: Jos Dirksen

Overview of this book

Creating the HTML skeleton

Tip

Delete Bookmark