Tutorial: Away3D TypeScript: Contained & Responsive Canvas

If you have downloaded the Away3D Foundation’s TypeScript GitHub repository and played around with their examples you may have been impressed, yet noticed that the examples fill the whole browser’s window. Responsive yes, but still uncontained. What if you wanted to place the 3D scene in a specific location of your HTML document? I’ll show you how.

We will be building upon our previous TypeScript code from the tutorial Away3D TypeScript: Bare Minimum Scene. That tutorial covers each line one at a time in its explanation. We will also be building upon HTML code outlined in the tutorial Away3D TypeScript: in an HTML Document. You can refer to those tutorials regarding the code I don’t specifically cover here.

Let’s Contain that 3D Beast

Let us look at the previous HTML code:

Pretty simple HTML with three import statements.

We are going to only need to add one thing; the container element.
Include a complete set of div tags with an id of away3DContainer inside the body element.
Like so:

We could stop there, however, I want a little more control of the container element, so I will add a little CSS, as seen in the full code below.

As you can see, I styled the element away3DContainer with position to absolute to be able to place it where ever in the document I want. (Which by the way is 50px from the top and 50px from the left.) The width and height are both set to 50% of the browser’s window size. I set the overflow to hidden, to prevent any scroll bars from accidently popping up. While we’re at it, set the overflow to hidden for all canvas elements within the away3DContainer div to prevent scroll bars there too.

Lastly, you might have noticed that I’ve included a span element in the away3DContainer, alerting users that they do not have WebGL support on their device. The span element has an id of disclaimer, which in a future tutorial we will use to modify the content dynamically. I styled the span to have a red font, so it will stick out. This statement can only be viewed, if the away3D scene fails to display. Otherwise the dynamically loaded canvas element will completely cover the disclaimer.

That’s it for the HTML document! On to the TypeScript file.

Alter the TypeScript file

Now that we have our modified HTML with a container element with id away3DContainer we can modify our Typescript file for a very minimal Away3D TypeScript scene. Which you can review each feature at: Away3D TypeScript: Bare Minimum Scene

I will post the entire modified code below, and highlight the changes.

Let’s start with the onload function and work our way back up from there.

Line 36 creates a variable labeled awayContainer that stores the reference to our away3DContainer div element in our HTML document.

Line 37 creates a variable labeled away3dObject that stores the reference to the newly created Away3D object. The second part calls the class that creates our 3D scene passing the variable that stores the reference to our away3DContainer element as an argument. I cast-type away3dObject as any, to avoid any compilation errors thrown by TypeScript.

Line 38 creates a variable labeled awayCanvas that stores the reference to the dynamically created canvas element that houses our Away3D scene. To specify the correct canvas element, we make an array of all the canvas elements, then select the last one that was added to the DOM. We know it is the last one, because we created it on line 37.

Line 39
reassigns the Away3D canvas element from the body element to the away3DContainer element as the parent element.

Line 40 reassigns the dynamically create div element from the body element to the away3DContainer element as the parent element.

Line 10 adds an expected parameter to the constructor. This will store the reference to our away3DContainer element in the HTML document.

Line 18 starts our resize method. It may or may-not receive an argument, so we set event of type Event to null. This method will not be returning anything, so we use the value void.

Lines 20-21
simply make sure the scene is in the top left corner of our away3DContainer element.

Lines 22-23 set the scene’s height and width to the away3DContainer element’s height and width. You might have noticed that we moved these two lines out of the constructor from our previous tutorial.

Line 14 sets up a listener for whenever the browser’s window is resized. When it does, it sends the event to our resize method.

Line 15 calls our onResize method once on initial creation, just to make sure it is set to the right size for the away3DContainer element.

Compile and Test in HTML

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

Whew. Done.

We now have an HTML document and supporting TypeScript file that can resize and contain any Away3D scene we throw at it. I will be using this setup in all future tutorials, so it is good to know what is happening. From here, I will create a master Away3D TypeScript: Template that all future tutorials will be based off of. To keep informed of upcoming tutorials, follow us on Facebook or Twitter.

Thank you for stopping by!

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

Leave a Reply

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