JavaScript-X3DOM學習筆記(三)-route型別節點功能的演示
阿新 • • 發佈:2018-11-19
VRML2 Source Book例子的基礎上做了些修改,使之能在x3dom 1.7.3中能正確執行。
顯示效果為一個跳動的磚頭。
x3dom_route.html
<html> <head> <meta charset="utf-8"> <title>一個使用x3dom route型別節點的例子</title> <!-- Original from http://www.web3d.org/x3d/content/examples/Vrml2Sourcebook/Chapter08AnimatingPositionOrientationScale/Figure08_3PositionInterpolatorIndex.html --> <script type="text/javascript" src="/x3dom/x3dom.1.7.3dev-full.debug.js"></script> </head> <body> <X3D style="width:100%;height:800px" showLog="false" id="x3d" > <Scene> <TimeSensor DEF='CLOCK' cycleInterval='4' loop='true'></TimeSensor> <!-- key,keyValue屬性中的值前後不加[]符號也是可以的 --> <PositionInterpolator DEF='CUBEPATH' key='[0.00 0.11 0.17 0.22 0.33 0.44 0.50 0.55 0.66 0.77 0.83 0.88 0.99]' keyValue='[0.0 0.0 0.0 1.0 1.96 1.0 1.5 2.21 1.5 2.0 1.96 2.0 3.0 0.0 3.0 2.0 1.96 3.0 1.5 2.21 3.0 1.0 1.96 3.0 0.0 0.0 3.0 0.0 1.96 2.0 0.0 2.21 1.5 0.0 1.96 1.0 0.0 0.0 0.0]'> </PositionInterpolator> <!-- 把CLOCK.fraction_changed同CUBEPATH.set_fraction聯絡在一起 --> <route fromNode='CLOCK' fromField='fraction_changed' toNode='CUBEPATH' toField='set_fraction'> </route> <!-- 操作物件 --> <Transform DEF='myTransform' rotation='0 1 0 .78'> <Shape> <Appearance> <Material diffuseColor='1.0 .5 .2'/> </Appearance> <Box size='1 2.5 0.5'></Box> </Shape> </Transform> <!-- 把CUBEPATH.value_changed同myTransform.set_translation聯絡在一起 --> <!-- 這裡編碼route節點之前,route節點依賴的myTransform節點必須已經在了 --> <route fromNode='CUBEPATH' fromField='value_changed' toNode='myTransform' toField='set_translation' /> </Scene> </X3D> </body> </html>