Tutorial: Away3D TypeScript: in an HTML Document

In our previous demo Away3D Typescript: Bare Minimum Scene, we broke down the bare necessities required for setting up an Away3D scene in TypeScript. Which then gets parsed into a pure JavaScript code file. This short demo will outline a bare minimum HTML document required for displaying our newly compiled Away3D JavaScript file.

I’m going to break away from my step-by-step styling tutorial, because it is so easy!
Let’s see an example HTML file. Here is my base document called, away3D.html.

That’s It!
Houston, Mission Complete.

I’m not going to cover the HTML in depth. There are thousands upon thousands of tutorials that are better suited than this tutorial. If the HTML confuses you, I suggest you take 5 hours and complete this great interactive free course through CodeAcademy.com. At the very minimum, take 20 minutes and finish the first 4 lessons, then come back here.

As you can see in the code above, there is the basic layout of a blank HTML document, with the exception of three JavaScript import statements nested inside of the Head tags.

The first three imported .js files contain the Away3D Foundation’s Away3d library, and JavaScript commands to control HTML5‘s canvas element. These three files are absolutely necessary for the third imported file to work. You can get the latest version of these three files from their active GitHub page here. There are also a number of great examples bundled in that repository as well.

The tfourth imported file is your own TypeScript .ts file compiled to a JavaScript .js file.
(If you don’t know how to compile the TypeScript to JavaScript, follow this handy tutorial.)
Here is were your magic creations come into play. If you are following mine or the Away3D Foundation‘s example files, the .js files will typically have a section of code at the bottom that looks like this:

Once all the important parts of the page is loaded, JavaScript will run examples.Away3DScene();. Which will dynamically create a canvas element below all the other elements within the body tags of the HTML document. It is on this canvas element that the Away3D viewport is rendered using WebGL.

And there you go. Brilliant!


Typically, if you are just plugging in the demo examples from the Away3D Foundation’s GitHub page, the rendered 3D scene will take up the whole browser window. They use some code similar to:

Which will fill the browser’s window with the Away3D‘s rendered canvas element.

In the follow up tutorial Away3D TypeScript: Contained & Responsive Canvas, I will demonstrate how to set up the HTML document and the JavaScript to place the dynamically created canvas inside a container element.

Additionally, if you plan to follow the upcoming tutorials, check out the post, Away3D TypeScript: Template. This will be the starting point from which I then build the tutorials upon.

Once again, thank you for stopping by. I hope you learned something. Follow us on Facebook or Twitter to keep informed of upcoming tutorials.

Posted in Away3D TypeScript, HTML, JavaScript Tagged with: , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *