Tutorial: Away3D TypeScript: Resource Complete

In this short tutorial, we build upon Away3D TypeScript: Hover Controller Part 1. We will be demonstrating a template for setting up a RESOURCE_COMPLETE listener. The listener’s handler will then add loaded assets to the scene. There will be a number of commented lines of code. For your own applications, simply uncomment the section you need and add any additional statements you may need.

What we will need to develop to achieve the above scene.

  • Enable the appropriate Parser for the type of file to be loaded
  • A listener and handler function for when the RESOUCE_COMPLETE event is fired.
  • Use the Asset Library’s load method to load an asset file.
  • Separate the individual assets loaded from the resource file.
  • Identify the assetType of the asset and handle the asset accordingly.

** Note In JavaScript a variable that is initialized with an Object, is actually only a reference to that Object. Changing the value of a property of the Object, alters the value for all references to that same Object.

This tutorial builds off of the Away3D TypeScript: Hover Controller Part 1. All the important new or changed code will be highlighted in the full code block below.

ResourceCompleteTemplate.ts

Line 13 creates an object container that will hold all the assets of the logo.

Line 34 calls a method to handle our assets.

Line 66 uncomments the enable the AWDParser statement. This tells the program to include the code that will enable the program to import and understand an AWD document file.

Lines 74 & 75 creates two listeners. One for when an asset is completely loaded, and the other for tracking the progress on how much of the asset’s file is loaded. Once the event is triggered by the listener, their corresponding handler methods are called.

Line 77 loads as AWD file into the program. In this example we are loading the GrokDD company logo in 3D.

Line 81 is the method for handling when the resources are completely loaded.

Line 83 sets up an array of all the assets that were loaded in the called file.

Line 85 for every asset loaded, we will now execute the following statements.

Line 87 creates a shortcut variable to the individual asset loaded from the AWD file.

Line 88 creates a switch statement that will detect the type of asset each asset loaded is. It will then perform the corresponding statements to the asset type.

Lines 90-124 contains commented lines. Uncomment the lines depending on the type of asset you are predicting to load.

Lines 96-101 handles when the asset type is of type Container.

Line 97 assigns the Container object to the variable _objectContainer.

Lines 98-99 reposition the Container object within the scene.

Line 100 adds the whole object container and all of its children to the scene.

Lines 111-114 demonstrate how to manipulate the geometry of an imported mesh.

Lines 119-121 add the Skybox asset to the scene.

Line 130 handles the loading progress. However, this event is not fully functional as of this writing, so I will not go into detail on this method.

Compile and Test in HTML

Remember, this is just the ResourceCompleteTemplate.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 7 to ResourceCompleteTemplate.js. Refer to the tutorial Away3D TypeScript: in an HTML Document if you need assistance.

In Closing

The RESOURCE_COMPLETE event is a valuable tool for identifying when a file and all of its dependencies are loaded. Once everything is loaded, we can use the Asset Manager to iterate through the assets, handling them individually as needed.

If you liked this tutorial, 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 *

*