|
  
|
|
|
|
by Adrian Scott
This article first appeared in Java Report Magazine.
|
|
|
|
|
|
If you try these examples and they don't work, you may need to make the following adjustment. Unix and Windows users should set the environment variable NS_ENABLE_MOJA=1. Macintosh users should edit the Navigator resources by adding the resource type 'MOJA' with ID 128. (I haven't had this trouble, but I've read that this may occur.)
Note that you will need Netscape 3.0 to be able to use these examples.
The form contains two buttons, each with an onclick field. The first button, named "start", will call the start() method of the Animator class using the syntax "document.animator.start()". (Remember that animator is the name of this applet property of the document object.) Similarly, the second button calls the stop() method, with a button which has the onclick field value of "document.animator.stop()".
Listing 1:
<html> <head> <title>The Animator Applet - example 1</title> <!-- Changed by: Herb Jellinek, 18-Apr-1996 --> </head> <body> <hr> <applet name="animator" code=Animator.class width=460 height=160> <param name=imagesource value="images/Beans"> <param name=backgroundcolor value="0xc0c0c0"> <param name=endimage value=10> <param name=soundsource value="audio"> <param name=soundtrack value=spacemusic.au> <param name=sounds value="1.au|2.au|3.au|4.au|5.au|6.au|7.au|8.au|9.au|0.au"> <param name=pause value=200> </applet> <form name="form1"> <input type=button value="start" onclick="document.animator.start()"> <input type=button value="stop" onclick="document.animator.stop()"> </form> <hr> <a href="Animator.java">The source.</a> </body> </html>The new version of example1.html is given in Listing 1. Once you've typed it in and saved it, try clicking on the buttons and see what happens. If you look at the source of the Animator applet, you'll be reminded that the start() and stop() methods control the thread that drives the animation. Since both of these methods are public, we can access them from JavaScript.
Here is a list of methods that can be used with LiveAudio and LiveVideo. I've had some difficulty with LiveAudio and LiveVideo. When I tried referring to the instance of LiveAudio with a name field in the <EMBED> tag, it didn't work. However, when I referenced the audio file using the embeds[] array, it worked fine. There is an example of this at the small Aereal LiveConnect Page.
| LiveAudio | LiveVideo | |
| play() | plays audio from current position | plays video from current frame |
| stop() | stops audio; rewinds to beginning | stops video |
| rewind() | rewinds audio to beginning | rewinds video to beginning |
| seek(x) | sets current position to time x (in seconds) frame number x | sets current video frame to frame number x |
| file formats supported | AIFF, AU, WAV, MIDI | AVI |
As before, we add a name field to the <EMBED> tag in the HTML, naming it "vrmlworld". Then we add a form named "form1" which has inputs for red, green and blue, plus a button that updates the VRML world using LiveConnect. The onclick value of the button will use the L3DPlugin object's setBackgroundColor() method and also JavaScript's parseFloat() method to turn the color input values into floats that the setBackgroundColor() method can read. The final HTML and JavaScript is given in Listing 2, and there is a screen shot in Figure 1.
Figure 1
Listing 2
<html> <head> <title> Aereal Live3d LiveConnect Color Change </title> </head> <body bgcolor="#FFFFFF"> <p> <embed name="vrmlworld" src="http://www.aereal.com/home.wrl.gz" height=300 width=400> <form name="form1"> red:<input type="text" size="4" name="red" value="1"> green:<input type="text" size="4" name="green" value="1"> blue:<input type="text" size="4" name="blue" value="0"> <p> <input type="button" value="change background color" onclick="document.vrmlworld.setBackgroundColor( parseFloat(document.form1.red.value), parseFloat(document.form1.green.value), parseFloat(document.form1.blue.value))"> <p> <p> </form> </body> </html>
Listing 3: bubble.wrl
#VRML V1.0 ascii
Separator {
DEF BackgroundColor Info { string "1 1 1" }
PerspectiveCamera { position 0 0 5 }
Material { diffuseColor .7 0 0 }
DEF Bubble Sphere { radius .4 }
Material { diffuseColor 0 .7 0 }
Cube { width .1 height 15 depth .1 }
Cube { width .1 height .1 depth 15 }
Cube { width 15 height .1 depth .1 }
}
The VRML Source for "bubble.wrl" is given in Listing 3, and the HTML Source is given
in Listing 4. In the VRML file, the name of the Sphere is Bubble, so we supply the string
"Bubble" to L3DPlugin's getObject() method, and then apply the scale() method to the
resulting L3DObject. The scale method takes five arguments. The first three arguments
are floats representing the amount of scaling to apply to the x, y, and z coordinates. The
fourth number, 2, indicates that the newly scaled object will replace the previous version.
The final number, 1, indicates that the scaling is only to be applied locally to this sphere.
Listing 4
<html>
<head>
<title>
Aereal Live3D Object Scaling
</title>
</head>
<body bgcolor="#FFFFFF">
<h1>
Aereal Live3D Object Scaling
</h1>
<embed name=bubble src=bubble.wrl height=300 width=400>
<form>
<input type=button value="scale up"
onclick="document.bubble.getObject('Bubble').scale(10,3,3,2,1)">
</form>
</body>
</html>
Figures 2 and 3 show the VRML World before and after the "scale up" button is pressed.
| Figure 2: Before | Figure 3: After |
 |
 |
With LiveConnect, Netscape is breaking down the barriers between different media and data types. In the future we can expect to see JavaScript in VRML, Java applets textured onto 3D objects in VRML worlds, and more!
Adrian Scott (adrian@aereal.com), is founder and CEO of Aereal Inc. (http://www.aereal.com), a leading Java/VRML company. He is a co-author or contributing author to five Internet books, Editor of SIGS' Java Professional Book Series, and keeper of the VRML/Java/JavaScript FAQ.
Relevant URLs:
|
|