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

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

My publisher tells me that my new book, 3D Studio MAX 3 R3: In Depth, will be available within the next week. If you're a MAX user, or a would-be MAX user, you might want to look over a sample chapter--and maybe even order the book at the same time.:)

In the past couple of lessons, we've been previewing the soon-to-be released Shout3D 1.0. This remarkable package (as I cannot repeat too often) allows developers to embed a realtime, interactive 3D rendering engine directly into a Web page, without any plug-ins. Shout3D uses a Java applet as the 3D player, and therefore makes use of the full programming power of the Java language to realize unlimited possibilities for user interactivity. I hope to have the final word on the release date of this important package in the near future.

Java programming, however, is not a skill that the average 3D artist (or even the average Web developer) is likely to have. Many interested people may well be impressed with Shout3D, but doubt (or even dismiss) their own ability to learn this toolset. Of course, a great deal can be done with Shout3D with very little programming, and, if no interactivity is required, no programming at all. But it's fair to say that solid commercial applications for 3D on the Internet depend on strong user interactivity, and this, of course, requires coding.

Thus, I was very excited to learn how much can be achieved with Shout3D using JavaScript instead of Java. JavaScript is the standard scripting language of Web development, and a far larger number of people know JavaScript than Java. JavaScript is easy to learn and fun to experiment with. No compiler or development environment is required. You just type code onto the HTML page and view the page to test it. The browser interprets the code and kicks back error messages to help you debug. By using JavaScript, you can get started in Shout3D fast, and pick up Java as needed.

I'd always wondered about the name "JavaScript." It seemed to have nothing much to do with the true Java language. But, as it turns out, there is an important connection. If you have a Java applet on a Web page, you can call the functions (methods) of that applet from JavaScript functions elsewhere on the page. This makes it easy to add interactivity to applets, as we'll soon see.

To understand the situation, I'll start by creating interactivity in the applet itself (using Java), rather than by using JavaScript outside the applet. The following applet loads a looping animation file created in 3D Studio MAX and exported to VRML. Click in the applet window to start the animation. Then click again to stop it. This is just a simple toggle--but it's still very impressive to see it running on a Web page!

Keyframed animation in Shout3D is driven by a TimeSensor, a node right out of VRML. When the TimeSensor is started, the animation begins. At this point, we must distinguish between stopping and pausing the TimeSensor. If we pause the TimeSensor after it has started, we can unpause it to continue the animation. But if the animation is stopped, it can only be restarted from the beginning. Thus the toggle in this applet starts the animation, and then just pauses and unpauses it.

Let's take a look at the code.

To Continue to Parts 2 and 3, Use Arrow Buttons

Created: Oct. 12, 1999
Revised: Oct. 12, 1999

URL: https://webreference.com/3d/lesson77/