3D Animation Workshop: Lesson 77: JavaScript-Powered Web 3D

Lesson 77 - JavaScript-Powered Web 3D - Part 3

START-STOP

The only functional difference between the applet above and the applet on the first page of this lesson is that the toggle is activated by clicking on the words beneath the applet window (rather than in the window itself). This text is simply an HTML link, and an attractive image of a button could have been used instead (perhaps a JavaScript button that changes as it toggles, or lights up as the mouse passes over it). But this difference gets to the main point. In this example, JavaScript is used to send messages between page elements outside the applet to the applet itself. (For some reason, Microsoft Internet Explorer 4.5 for the Macintosh is unable to send this message.)

Take a look at the HTML source code of this page to understand what's happening. Look in the HEAD section for the SCRIPT tags. Inside the SCRIPT tags you'll find all guts of the StartStopPanel, distilled down to just the essentials. There is a variable named "started" that indicates whether the animation has been started. And then there is a toggle function that gets the TimeSensor from the sceneÂstarting it and pausing and unpausing as you click.


var started = false
function toggle() {
	var timer  =  document.Shout3D.getNodeByName("Box01-TIMER");
	
	if (started == false) {
		timer.start(); started = true}
	else if (timer.getPaused() == false) {
		timer.setPaused(true)}
		else {timer.setPaused(false)}

In the body of the page, beneath the applet, is a simple text link to the JavaScript function. Clicking on the text executes the function.

The ease with which this functionality was created is astounding. The amount of coding is minimal and requires no great effort to learn. Testing is easy, and you can make changes simply by typing into your HTML page and refreshing the browser. Note from the HTML source code how there is no extended applet. As you can see in the APPLET tag, only the basic Shout3Dapplet is used, and all the interactivity is created on the HTML page. I've already experimented with other toggles that move the object or the camera, or change the color of the object. You can take this simple tool very far.

The use of JavaScript promises to make the power of Shout3D 1.0 accessible to a wide audience. Of course, JavaScript is only being used to call the Java functions in the Shout3D library, and thus the user must understand some Java to use these functions effectively. But this is a far cry from having to learn Java coding to implement all aspects of user interactivity. I'm happy to have lived to see the day when such important threads in modern technology as 3D graphics, VRML, Java and JavaScript can intertwine to support a new era in web graphics.

3D Animation Workshop: Lesson 77: JavaScript-Powered Web 3D

Lesson 77 - JavaScript-Powered Web 3D - Part 3

START-STOP

Find a programming school near you