In my last artitle,I discussed the Java EAI mode to control the vrml. Well,the eai mode is powerful because of the powerful java support.Usually for those not very complicated communication cases,the eai mode is not recommended.Today I'll show the more common tool to realize the vrml control,most people have use this tool very frequently for web design,special page effects,and so on.That's it --the JAVASCRIPT.
Using javascript to control your wrl,you should be very familiar with your VR contents:the object names,the node tree,the interpolators,the sensors,the times and the touch or driven relationship between them.That's very important and you should design the vrml file's struct when you considering the whole web page.What you want to show to the consumer or clients,how to show the product or the process of the assembling or other things,you should take this into consideration and design the html and the vrml.
This article assumes you are familiar with VRML,JavaScript,Html.
The first example is to control the coordiantes of one moving object in the VR.It's very easy and its code is capable of self-explanation.
The coordinate.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>Nasky VRML simple test-for students and beginners</TITLE><META http-equiv=Content-Type content="text/html; charset=gb2312"><META content="MSHTML 6.00.2900.2180" name=GENERATOR>
<SCRIPT language=JavaScript>
var i;var j;var k;var timer;function M_o()
{ 
clearTimeout(timer);M_e=Scene.Engine; M_e.Nodes("my_Time").Fields("enabled")=0; i=M_e.Nodes("my_view").Fields("translation").x; j=M_e.Nodes("my_view").Fields("translation").y; k=M_e.Nodes("my_view").Fields("translation").z; document.tickform.tickfield.value=i //對文本框進行附值document.tickform.tickfielda.value=jdocument.tickform.tickfieldb.value=k
} function M_input(){ clearTimeout(timer);M_e=Scene.Engine; M_e.Nodes("my_Time").Fields("enabled")=0; M_e.Nodes("my_view").Fields("translation").x=document.tickform1.tickfield1.value;M_e.Nodes("my_view").Fields("translation").y=document.tickform1.tickfielda1.value;M_e.Nodes("my_view").Fields("translation").z=document.tickform1.tickfieldb1.value;}function M_c(){M_e=Scene.Engine; M_e.Nodes("my_Time").Fields("enabled")=1; i=M_e.Nodes("my_view").Fields("translation").x;j=M_e.Nodes("my_view").Fields("translation").y; k=M_e.Nodes("my_view").Fields("translation").z;document.tickform.tickfield.value=i //對文本框進行附值document.tickform.tickfielda.value=jdocument.tickform.tickfieldb.value=k timer=setTimeout("M_c()",50)} function textprintdown()//自定義運行函數{
}</SCRIPT></HEAD><BODY leftMargin=0 topMargin=0><p align="center"> </p><p align="center"> <object id=Scene type=application/x-oleobject height=337 width=571 classid=CLSID:86A88967-7A20-11D2-8EDA-00600818EDB1> <param name="WaitForAllResources" value="0"> <param name="Scene" value="aaa.wrl" ref> <param name="RendererName" value="DirectX Renderer"> <param name="NavigationBar" value="1"> <param name="ConsoleMode" value="0"> <param name="ShowFps" value="-1"> <param name="ShowRenderingTime" value="0"> <param name="ShowProgress" value="-1"> <param name="RendererHints" value="1024"> <param name="Collider" value="0"> <param name="ColliderMode" value="0"> <param name="HeadLight" value="-1"> <param name="NavigationMode" value="3"> <param name="viewpoint_transition_mode" value="0"> <param name="show_hidden_viewpoints" value="0"> <param name="TravelSpeed" value="3"> <param name="BackColor" value="12632256"> <param name="ShowLogo" value="-1"> <param name="ContextMenu" value="-1"> <param name="VRML_BACKGROUND_COLOR" value="#c0c0c0"> <param name="VRML_DASHBOARD" value="TRUE"> <param name="Mask" value> <param name="LoadDroppedScene" value="-1"> <param name="MuteSound" value="0"> <param name="Appearance" value="0"> <param name="CpuLoading" value="80"> <param name="RendererOptimization" value="1"> <param name="Skin" value="{1706B265-E103-4332-9871-7FEE6C37C699}"> <param name="NavigationStyle" value="turn"> <param name="NavigationType" value="EXAMINE"> <param name="InputDevices" value="7"> </object><p align="center"><a href="javascript:M_c()">顯示座標</a> <a href="javascript:M_o()">停止</a></p><p align="center"><table width="631" height="23"> <tr> <td width="260" height="17" align="center"><strong><font size="+4">X:</font></strong> </td> <td width="148"><strong><font size="+4">Y:</font></strong></td> <td width="207"><strong><font size="+4">Z:</font></strong></td> </tr></table></p><p align="center"><form name=tickform><textarea name=tickfield wrap=virtual></textarea><textarea name=tickfielda wrap=virtual></textarea><textarea name=tickfieldb wrap=virtual></textarea></form></p><p align="center"><strong>請輸入要瀏覽的經緯度</strong></p><p align="center"><form name=tickform1><textarea name=tickfield1 wrap=virtual></textarea><textarea name=tickfielda1 wrap=virtual></textarea><textarea name=tickfieldb1 wrap=virtual></textarea><a href="javascript:M_input()">執行座標</a></form></body></html>the vrml:aaa.wrl
#VRML V2.0 utf8 DEF my_view Transform{ translation 1 1.2 16 rotation 0 1 0 -1 children [ DEF my_viewpoint Viewpoint { description "AutoRun" orientation 1 0 0 0 position 0 0 0 } ] } DEF old_Viewpoint Viewpoint { description "Entry point" orientation 0 1 0 -1 position 1 1.2 16 } DirectionalLight { ambientIntensity 0.8 intensity 0.6 direction 0 -1 0 } Shape { appearance Appearance { material Material { diffuseColor 1 0 0 } } geometry ElevationGrid { xDimension 4 xSpacing 5.5 zDimension 4 zSpacing 5.5 height [0.8 0.1 0.4 0.5 0.5 0.4 0 0.4 0.2 0.1 0.4 0.3 0.5 0.6 0.7 0.2] } } Transform { translation 8 3.5 8 children [ Shape { appearance Appearance { material Material { diffuseColor 0 0 1 } } geometry Box {size 1 1 1 } } ] } Transform { translation 15 0.6 15 children [ Shape { appearance Appearance { material Material { diffuseColor 0 1 0 } } geometry Cylinder { height 1.2 radius 0.4 } } ] } DEF my_Time TimeSensor { cycleInterval 20 enabled FALSE loop TRUE } DEF my_Position PositionInterpolator { key [0 0.25 0.38 0.5 0.75 1.0] keyValue [1 1.2 16,2 1.2 1,7 1.2 1, 15 1.2 1,14 1.2 12,1 1.2 16] } DEF my_Direction OrientationInterpolator { key[0 0.25 0.38 0.5 0.75 1.0] keyValue [0 1 0 -1,0 1 0 -2.9,0 1 0 3.14, 0 1 0 2.9,0 1 0 1.4,0 1 0 -1] } DEF my_LookUpAngle OrientationInterpolator { key [ 0 0.25 0.38 0.5 0.75 1.0] keyValue [1 0 0 0,1 0 0 0,1 0 0 0.3, 1 0 0 0,1 0 0 0,1 0 0 0] } ROUTE my_viewpoint.bindTime TO my_Time.set_startTime ROUTE my_viewpoint.isBound TO my_Time.set_enabled ROUTE my_Time.fraction_changed TO my_Position.set_fraction ROUTE my_Time.fraction_changed TO my_Direction.set_fraction ROUTE my_Time.fraction_changed TO my_LookUpAngle.set_fraction ROUTE my_Position.value_changed TO my_view.set_translation ROUTE my_Direction.value_changed TO my_view.set_rotation ROUTE my_LookUpAngle.value_changed TO my_viewpoint.set_orientation
the running result:
In the second example , you can control more things,the code is also capable of self-explanation,here is the code.
the html: aa.htm
<html><title>Nasky vrml samples-js</title><body><SCRIPT language=JavaScript>function sendEvent( ){document.CC3D.setNodeEventIn("view1",'set_bind','TRUE')}function original( ){document.CC3D.setNodeEventIn("view0",'set_bind','TRUE')}function stop( ){document.CC3D.setNodeEventIn("clock",'enabled','FALSE')}function start( ){document.CC3D.setNodeEventIn("clock",'enabled','TRUE')}function change( ){document.CC3D.setNodeEventIn("blue",'diffuseColor','.70213 .70213 .70213')}function positionshow( ){ var x; x=document.CC3D.getNodeEventOut("ok","translation")document.tickform.tickfield.value=x}function positiontransmit( ){ var x; x=document.tickform.tickfield_a.valuedocument.tickform.tickfield_b.value=xdocument.CC3D.setNodeEventIn("clock",'enabled','FALSE')document.CC3D.setNodeEventIn("ok",'translation',x)}</SCRIPT><object classid="CLSID:4B6E3013-6E45-11D0-9309-0020AFE05CC8" name=CC3D id=CC3D WIDTH=598 HEIGHT=448 > <param name="SRC" value="box.wrl"> <embed name=CC3D src="box.wrl" type="application/x-cc3d"WIDTH=598 HEIGHT=448> </embed> </object><p><a href="javascript:sendEvent()" >更改視點到view1</a></p><p><a href="javascript:original()" >切換到原視點</a></p><p><a href="javascript:stop()" >停止</a></p><p><a href="javascript:start()" >開始</a></p><p><a href="javascript:change()" >改變顏色</a></p><p><a href="javascript:positionshow()">顯示座標</a></p><form name=tickform ><textarea name=tickfield wrap=virtual></textarea><textarea name=tickfield_a wrap=virtual></textarea><a href="javascript:positiontransmit( )">positiontransmit</a><textarea name=tickfield_b wrap=virtual></textarea></form></body></html>
the WRL: aa.wrl
#VRML V2.0 utf8#written by blaxxunCC3D 5.104DEF view0 Viewpoint { position 0 0 10 fieldOfView 1.177 description "view0"}DEF view1 Viewpoint { position 11.91 1.2 65.61 orientation 0.02942 0.8073 -0.5894 -0.05918 fieldOfView 1.177 description "view1"}DEF ok Transform { children DEF mm Shape {geometry Box {size 0.5 0.5 1} appearance Appearance {material DEF blue Material { diffuseColor .10213 .70213 .70213 }}} translation 0.151824 0 0}DEF board Transform {translation 0 -0.9 0 children [ Shape {geometry Box { size 10 0.2 10 } appearance Appearance {material Material {diffuseColor 0.5 0.4 0.2}} } ]}DEF clock TimeSensor { cycleInterval 5 enabled TRUE loop TRUE}DEF position PositionInterpolator { key [0,0.5,1] keyValue [-1 0 0,1 0 0,1.2 -0.5 -1]}ROUTE clock.fraction_changed TO position.set_fractionROUTE position.value_changed TO ok.set_translation
and the running result:
Nasky