Tutorial: Away3D TypeScript: Materials – Texture

In this quick overview tutorial, we’ll be implementing the TextureMaterial in the Away3D TypeScript library.

TextureMaterial is a material that uses a texture (an image) as the surface’s diffuse color.

We will be recreating the scene as seen above. (You can use any square image you want as a texture. If you would like to use mine, grab it here.)

To use a TextureMaterial on our Template code, we’ll need to:

  • Declare, instantiate, and initialize a new TextureMaterial object.
  • Assign the TextureMaterial object to the Mesh object’s material.
  • Grab the external texture file from its URL.
  • Listen for when the texture file is fully loaded.
  • Once fully loaded, assign the loaded texture to our TextureMaterial.

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

TextureMaterial.ts

Line 5 renames the class to TextureMaterial.

Line 11 declares a variable named _objectMatrial of type TextureMaterial().

Line 25 calls the method setupMaterials().

Line 28 calls the method setupAssetLibrary().

Line 49 instantiates a new TextureMaterial() object referenced by the variable _objectMaterial. It was initialized with its default settings: which we’ll discuss more later.

Line 56 instantiates a new Mesh() object referenced by the variable _objectMesh. Then _objectMesh‘s geometry was initialized with _objectGeometry. Finally the _objectMesh‘s material was initialized with our TextureMaterial object _objectMaterial.

Lines 75-80 creates the private method setupAssetLibrary(). Here we will create a listener for when assets are loaded, then load some assets.

Line 77 adds an event listener that will listen for loader events. Particularly the RESCOURCE_COMPLETE event. Once this event is fired, the listener will trigger the method, onResourceComplete().

Line 79 loads an asset. To locate the correct asset, we call the URLRequest() method and pass it the relative address to our texture image.

Lines 83-86 create the private method onResourceComplete().

Line 85 assigns our imported texture image to our material object’s texture node. We use the generic cast typing to force the following variable to type Texture2DBase. We pass event.assets[0] as the argument, because we know that only one asset was loaded. (A single image.) And that asset is the first element in the assets array. If we were passing an .obj file with imbedded image data, we would need a different system to retrieve the data.

Line 110 changes the called class name to TextureMaterial.

That’s it, our object is in the scene.

However, we glazed over the initialization process, let’s take a closer look at the object’s constructor.

Constructor

The constructor looks as follows:

The Constructor’s Parameters:

  • texture:Texture2DBase (default = null).
  • smooth:Boolean (default = true)
  • repeat:Boolean (default = false)
  • mipmap:Boolean (default = true)
    *Note, if you have an irregular sized texture, turn mipmaps to false. Side note, as of writing, the Away3D TypeScript library does not permit use of anything besides a square image with a pixel size a power of 2. I.e. 256×256, 512×512, 1024×1024 etc.

So in our initialization we stated:

Which created a TextureMaterial:

  • That is without a Texture2DBase texture source. We initialize this after the asset file has been loaded.
  • Smoothing defaulted to true.
  • Repeat defaulted to false.
  • Mipmaps defaulted to true.

In Closing

Adding a TextureMaterial is relatively easy. Just understanding the constructor and what the parameters are, is the hardest part. You can look at the official documentation here.

If you want to add more assets; in the setupAssetsLibrary() method, you can simply load more URLRequests. Like so:

Then in the onResourceComplete() method, include some conditional statements. For example:

That will get the job done. Since we are only passing one image with each asset load, it will be the first element in the event.assets[] array. And recall that the onResourceComplete() method is called once per load() method.

But Wait! There’s a better more flexible way.

The above approach will work just fine on small scale projects, where you know exactly what assets are being loaded and when. However for a more dynamic approach to loading, see our next tutorial. Away3D TypeScript: Materials – Multiple Textures.

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

*