Tutorial: Away3D TypeScript: Materials – Environment Map

In this very short tutorial, we demonstrate how easy it is to set up an Environment Map or EffectEnvMapMethod object in your scene. A EffectEnvMapMethod is a great way to add realism and content to your scene without a lot of overhead. It simulates a reflective surface, without having to raytrace a lot of light photons.

What we will need to develop a EffectEnvMapMethod:

  • A ColorMaterial object that can accept additional shading methods.
  • An object to assign our ColorMaterial to.
  • An ImageCubeTexture that will hold the 6 side images of a cubed environment.
  • Assign the ImageCubeTexture to the EffectEnvMapMethod and add that method to our ColorMaterial object.

This tutorial builds off of the tutorial Away3D TypeScript: Skybox. All the new or changed code will be highlighted in the full code block below.


Line 12 declares a new ColorMaterial object named _objectMaterial.

Line 58 creates a new ColorMaterial object labeled _objectMaterial. We then set the ColorMaterial to the color white, 0xFFFFFF, and the alpha to full opacity, 1.

Line 65 assigns the _objectMaterial ColorMaterial object to the material node of our _objectMesh Mesh object.

Line 99 adds an EffectEnvMapMethod method to our _objectMaterial. The EffectEnvMapMethod uses the same ImageCubeTexture as our Skybox. That way the object is simulating the reflection of the Skybox. In reality, it is not. We additionally set the alpha value to full opacity, 1. If we lowered the opacity the ColorMaterial or TextureMaterial (which ever you end up using) will show through instead of being fully reflective.

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 EnvMapMethod is an easy way to add reflective materials to your scene. For a more in-depth look at all its parameters, check out the EnvMapMethod‘s documentation.

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 *