Tutorial: Away3D TypeScript: Bare Minimum Scene

This first demo will break down a bare minimum Away3D TypeScript scene. It will not be impressive, but it will get the ball rolling. (Or cube spinning as it may be.)

Note, this tutorial creates a TypeScript file with .ts as the extension. To learn how to install TypeScript using Node.js please refer to this handy tutorial Away3D TypeScript – Getting Started. Once you compile the TypeScript into JavaScript, you can reference the JavaScript file from your HTML document, as outlined in this tutorial, Away3D TypeScript: in an HTML Document.

In this demo, we will achieve the following:

  1. Setup a JavaScript module and class.
  2. Launch our code when the browser loads.
  3. Setup an Away3D viewport.
  4. Setup an object (a cube).
  5. Setup a timer that triggers an event every frame.
  6. Render each frame.
  7. Rotate the object (a little) on every frame.

Step 1 & 2: Skeleton Structure

Let’s setup the bare bone structure for our TypeScript file.

Line 1 This commented code tells the TypeScript compiler that reference to our away.* objects can be found here.

Line 3 Sets up the JavaScript module. I labeled the namespace examples.

Line 5 Sets up the class BareMinimumScene. I used export on the class. This is a TypeScript syntax necessary to allow other scripts to access this module’s class code.

Line 7 Sets up the constructor for the class. Within the constructor are all the statements that are executed when a copy of the class is instantiated.

Line 14 Sets up a listener for when the window is loaded. Once it is loaded, perform the following function.

Line 16 Calls for a new instance of the BareMinimumScene object from the module examples.

That’s it! A working skeleton. Wouldn’t it be great if we could call it a day there? Sorry chump, we’ve got more lines to code.

Since we’ve got our bare minimum structure already set up, the rest of the code we will be writing will be within the BareMinimumScene class().

Step 3: The Away3D Viewport

The Away3D viewport is where all the magic happens. Think of it as the window looking into our 3D scene. The viewport by default will create a blank scene already. We just create a window into that scene. The camera controls where that window is in our scene. The viewport also comes with a default camera, so we won’t have to make one of those either. Unlike the Duke boys, them Away3D Foundation boys are trying to make our lives easier all the time. So let’s make a viewport, and the default include scene and camera.

Within the class and before the contructor() include the following line:

This line creates a private variable labeled _view. private, because nothing outside of our class needs access to this variable. The next part of this line sets the type of this variable to View, which is located in the library structure away.containers. Lastly, we set our new variable of type View to equal a new View with a DefaultRenderer as the default renderer.

Now, let’s set up the height and width of our viewport. Otherwise we would not have sufficient viewing area for the scene. The code below will set the viewport’s height and width to the same size as the browser’s window dimensions.
Inside the constructor() include the following lines:

If you ran the code now, all you would see is a large black rectangle. You can see the scene, but there is nothing in it. Let’s add an object now.

Step 4: Add an Object

We will be adding a cube to our scene. Nothing exciting. it won’t even have an interesting texture map on it. Just a default check-board pattern. But it will be there! In our Scene!
To add an object, first we will have to create the Geometry (or shape) of the object. It may seem like that’s all we need, but the geometry object is a simply object that doesn’t know much. Like color, placement, how to rotate, etc. That is why we will need to assign the geometry to a Mesh. Meshes are more advance objects that know a lot more about how to look, and act. Let’s create our geometry and mesh now.
Include the following line below the class and before the constructor():

We creates a private variable labeled _cubeMesh of type Mesh. We then set the Mesh equal to a new PrimitiveCubePrefab with arguments; width 250, height 250, depth 250. I chose the value 250 simply because it fills the default scene and camera view nicely. You can choose your own favorite non-negative number. We then call the getNewObject method to return our prefabricated Cube geometry while casting its type as Mesh using <away.entities.Mesh> .

Once we have created the object geometry and the mesh for the object, we need to put it into the scene. To do so, add the next line within the constructor().

Step 5: Timer

Now that we have a scene, view, camera and an object; it is an appropriate time to add a timer to trigger an method every time the app enters a new frame.
Include the following line below the class and before the constructor():

This line creates a private variable labeled _timer of type RequestAnimationFrame and sets it equal to a new RequestAnimationFrame with the arguments, this.onEnterFrame and this. Basically we are saying, “When the app enters a frame, run the method onEnterFrame and the context is the object that triggered the event. (In our case this or the same object.)”

Next we need to write the method onEnterFrame.
Include the following lines below and outside of the contructor() but still within the class:

This will define a private method labeled onEnterFrame that receives a numerical argument, and does not return any value.

Now that we have a method for our timer, we need to actually start our timer.
Include the following line below the other code inside of the contructor():

This calls the method start() on the object of type RequestAnimationFrame that is labeled _timer. We are off an running! Time/Animation is now moving forward.

Nothing is happening! We need to render the 3D scene to the screen.

Step 6: Render the Scene

Include the following line inside the onEnterFrame method:

Here we simply said, “on every frame, render the view.”

Nothing is still happening! Well, yes it is actually. However it is rendering the exact same thing over and over.

Step 7: Let’s Take this Cube for a Spin!

Let’s add some spin to our cube.
Include the following line inside the onEnterFrame method, but above the line this._view.render();:

We’ve now just told the cube’s mesh to rotate on the Y axis 1 degree more every frame.

Brilliant!

The final BareMinimalScene.ts file’s code should look like this:

Compile and Test in HTML

Remember, this is just the BareMinimalScene.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 in an HTML document refer to the tutorial Away3D TypeScript: in an HTML Document.

In Conclusion

I hope I have given you a good starting idea on what is required for an exciting Away3D scene using HTML5‘s canvas element.

Up next will be a demo on setting up an Away3D TypeScript: Template that will be used in many upcoming tutorials.

You can follow us on Facebook or Twitter to keep an eye out for more tutorials.

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

Leave a Reply

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

*