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

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

As mentioned in the previous lesson, interactivity is created in Shout3D 1.0 by extending two basic Java classes—Shout3DApplet and Shout3dPanel. Extending the applet class is a trivial exercise, and all the real work is in extending the panel class. Here is the all of the code in the new panel class, which I named StartStopPanel.

public class StartStopPanel extends Shout3DPanel implements DeviceObserver {
	
 	TimeSensor timer;
	boolean started = false;
	/**
	 * Constructor
	 */
	public StartStopPanel(Shout3DApplet applet){
		super(applet);
	}
	
	/**
	 * Initializing
	 */	
   	protected void customInitialize() {
		
		timer = (TimeSensor)this.getNodeByName("Box01-TIMER");
		this.addDeviceObserver(this, "MouseInput", null);
		//Call the parent class
		super.customInitialize();
	}
	/**
	 * Finalize
	 */
	protected void finalize(){
		this.removeDeviceObserver(this, "MouseInput");
	}
	/**
	 * Handle Mouse Input
	 */
	public boolean onDeviceInput(DeviceInput di, Object userData){
		MouseInput mi = (MouseInput) di;
		
		if (mi.which == MouseInput.DOWN){
			if (started == false) {
				timer.start(); started = true; return true;}
				else if (timer.getPaused() == false) {
					timer.setPaused(true); return true;}
					else {timer.setPaused(false); return true;}
		}	
		 else {return false;}
	}
}	

Note first how the class is extended from the Shout3DPanel class, and is only adding new functionality. Two variables (fields) are declared at the top. One is a reference to hold the TimeSensor and the other is a flag used to determine whether the TimeSensor is started. You can ignore the simple constructor function (or "method" as it is called in Java), and look at the customInitialize method. This function sets things up for the user. Note how it finds the desired TimeSensor in the scene (named Box01-TIMER) and sticks a reference to it in the timer field. Then another function prepares the applet to receive user input from the mouse. You really don't need to understand very much to use these methods. I basically copied them from one of the many example files that come with Shout3d 1.0.

Bypass the finalize method (also copied from an example), and get to the heart of the matter. The onDeviceInput method determines how the applet responds to all kinds of device input, including keyboard and mouse event. Here, only mouse events are being received so the device input is placed in a MouseInput object, named mi. This object contains all possible information about the event, such as whether a button was clicked or released.

Look at the code highlighted in red. This unit first determines whether the input is a mouse click (pressing the mouse button down). If it is, it then determines whether the animation has already started. If not, the animation is started by calling the TimeSensor's start function (timer.start()). If the animation has already been started, if will be paused or unpaused. The function determines whether the TimeSensor is paused by calling the timer.getPaused() method. If the TimeSensor is not currently paused, it is paused by calling timer.setPaused(true). If the TimeSensor is already paused, it is unpaused by calling timer.setPaused(false).

Now let's see how the same functionality can be created in only a few lines of JavaScript.

To Continue to Part 3, or Return to Part 1, Use Arrow Buttons

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

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