Tutorial: Away3D TypeScript: Skybox

In this short tutorial, we demonstrate how easy it is to set up a Skybox object in your scene. A Skybox is a great way to add depth and content to your scene without a lot of overhead.

What we will need to develop a Skybox:

  • An ImageCubeTexture object to hold our 6 panels(sides) of the Skybox.
  • A Skybox object that will surround our scene.
  • A loader to load a file that has information about the 6 images files we need to load.
  • A listener for when our assets are loaded.
  • A method to handle assigning our loaded assets to our ImageCubeTexture.
  • Assign the ImageCubeTexture to the Skybox object.

You can use my textures for your own project, until you get your own unique images.

This tutorial builds off of the Away3D TypeScript: Hover Controller Part 1. We’ve also used the asset loader we developed in the tutorial Away3D TypeScript: Materials – Multiple Textures. All the new or changed code will be highlighted in the full code block below.

Skybox.ts

Line 12 declares a new ImageCubeTexture object named _skyboxTexture.

Line 16 declares a new Skybox object named _skybox.

Line 73 creates a new AssetLoaderContext labeled assetLoaderContext. This object has methods to handle loading multiple files.

Line 74 adds a reference to resources’ relative path.

Line 77 loads the asset. To locate the correct asset, we call the URLRequest() method and pass it the relative address to our file containing a list of our assets. We also include a handler (assetLoaderContext)for the loaded asset.

The skyboxTextures.cube file looks like this:

Line 92 stores the asset images to our ImageCubeTexture object.

Line 94 instantiates a new Skybox object. Initialized with a new SkyboxMaterial object that had our skyboxTexture of type ImageCubeTexture.

Line 95 add the Skybox to the scene.

Compile and Test in HTML

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

In Closing

The Skybox is a great way to add depth to a 3D scene. For a more in-depth look at all its parameters, check out the Skybox‘s documentation.

The hardest part is getting your own Skybox textures. I created the above, using a free IBL/HDR image of a San Francisco street here. I then used Flaming Pear’s free demo Photoshop plug-in Flexify 2 to convert the HDR image into cube faces.
I used a cross pattern as seen below.

Away3D CubeMap

Away3D CubeMap

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 *

*