Tutorial: Away3D TypeScript: Template

In an effort to keep things simple for you as well as me, it is best to have a base script to build upon. Therefore, Away3D TypeScript Template will be the starting point for all future tutorials.

In our previous demo Away3D Typescript: Bare Minimum Scene and Away3D TypeScript: in an HTML Document we broke down the bare necessities required for setting up an Away3D scene in TypeScript and showcasing it in an HTML document. Then in Away3D TypeScript: Contained & Responsive Canvas we demonstrated how to keep the scene contained within an element and responsive. If the code below is confusing, please refer to these three tutorials for guidance on what is happening in the code.

HTML Template

The code above is similar to the code from the Away3D TypeScript: Contained & Responsive Canvas tutorial. However in our away3DContainer div we’ve added a canvas element labeled testWebGL. This canvas element will be required to run Google’s webGL utilities which we’ve included in line 8. You can download it here. Click here for more information on the utilities.

You’ll also notice that we’ve moved the onload function out of the TypeScript file and into the HTML document. This will allow for more extendibility for your own code.

Let’s take a closer look at some of the more important lines:

Line 38 calls our onload function.

Line 40 creates a reference labeled testWebGL to our empty canvas element labeled testWebGL.

Line 41 calls Google’s webGL utilites setupWebGL. We pass it the reference to our canvas element testWebGL. The method tests if webGL is a accessible on the user’s computer. If it is not, testWebGL is replaced with a statement that their device is incompatible or instructions on how to access webGL content. The results of the test are then stored in webGLResults.

Line 43 if the webGLResults are positive (as in webGL is accessible) run our code.

Line 44 creates a variable labeled awayContainer that stores the reference to our away3DContainer div element in our HTML document.

Line 45 removes the testWebGL canvas element from our away3DContainer div. Since it has served its purpose of testing if webGL works, we no longer need it.

Line 46 creates a variable labeled away3dObject that stores the reference to the newly created Away3D object. The second part calls the class that creates our 3D scene passing the variable that stores the reference to our away3DContainer element as an argument. You will need to replace Template in future tutorials to the name of your TypeScript object that you make.

Line 47 creates a variable labeled awayCanvas that stores the reference to the dynamically created canvas element that houses our Away3D scene. To specify the correct canvas element, we make an array of all the canvas elements, then select the last one that was added to the DOM. We know it is the last one, because we created it on line 46. This is the solution for now, however in future releases for AwayJS, during construction you should be able to dictate where and what to call the created canvas.

Line 48 assigns an id of awayCanvas1 to our newly created canvas. This is so you can directly reference it in plug-ins that require an id.

Line 50 reassigns the Away3D canvas element from the body element to the away3DContainer element as the parent element.

Line 52 removes the dynamically created div element from the DOM. It may be used for planed future features, but for now it serves no purpose. So let’s just remove it.

Away3D TypeScript Template

Our Away3D TypeScript Template will comprise of:

  • A viewport
  • A camera
  • A frame counter
  • A checkered patterned cube
  • A browser resize listener

Our TypeScript file looks dramatically different. However upon a closer look, it is mostly the same as the files we constructed in the Away3D TypeScript: Bare Minimum Scene and Away3D TypeScript: Contained & Responsive Canvas tutorials. For the most part we separated the declaration of variables from initialization. Secondly, to better keep things organized, the constructor is now comprised of calls to class methods instead of variable initializing and functions.

Let’s quickly go over what we’ve changed, and new features.

Line 1 ensures that we have access to ambient declarations in the Away3D library that may be necessary for future examples.

Lines 8-17 declares the basic variables.

Line 11 is new, as I wanted to demonstrate how to set up a material. However we will not be using it, so it is commented out.

Lines 20-27 constructs our scene, by calling some base methods that group their namesake statements.

Lines 30-34 sets up the viewport then calls a separate method sizeView (Lines 74-78) that sets up a listener for when the browser resizes, then calls the resize method once.

Lines 37-42 alters where the camera (viewport) is in the scene, and which direction it is looking at. Imagine the center of the universe is at (0,0,0). lines 39 and 40 say, “Back up 500 units, and move up 500 units from the center of the universe.” Then line 42 says to, “Look at the center of the universe”. This is because a new Vector3D() object is at (0,0,0) by default. ** We move the camera around the center, that way we don’t have to move the other object(s). We can just leave them in the center of the universe. Once there are more objects, this becomes much more practical.

Lines 45-48 demos how to set up a material. For this simple material we chose a solid red (0xFF0000) color. However, we do not implement this material in this template so it is commented out. The reason being is the default checkerboard patter makes for a more interesting material and is easier to understand a simple scene and object. If we wanted to use this material, simply assign _objectMaterial to _objectMesh‘s material property.
For example, add the line:
this._objectMesh.material = this._objectMaterial;

Lines 51-55 creates a cube with a default checkerboard material and adds it to the scene. Chances are, in future tutorials we will not be using this cube.

Lines 58-62 sets up a timer that keeps track of the frames per second. Then calls the method onEnterFrame every time the scene enters a new frame.

Line 61 starts the timer.

Lines 65-69 list some commands to do on every frame. In this example we simply rotate the cube along the Y axis. Then line 68 renders the new frame. (Very important!)

Lines 72-76 sets up a listener for when ever the browser resizes. Then calls the onResize method once, just to make sure everything is positioned and sized correctly.

Lines 79-85 resizes the viewport on the canvas element, positioned properly within its container and of the right dimensions.

Compile and Test in HTML

Remember, this is just the Template.ts TypeScript file. You still need to compile the TypeScript file into a JavaScript file for browsers to read. For a refresher on how to do that refer to Away3D TypeScript – Getting Started.
Lastly, to implement the complied JavaScript file into our HTML template document change the JavaScript file name in Line 9 to Template.js. Refer to the tutorial Away3D TypeScript: in an HTML Document if you need assistance.

In Closing,

These two templates HTML and TypeScript will be the starting point for future tutorials. Most likely the objects and materials will change. As well as other methods and calls in the constructor to those methods will be added. To name a few: lights, loaders, skybox, fog, hover camera, etc.

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 *