1. 程式人生 > >JavaScript-X3DOM學習筆記(三)-route型別節點功能的演示

JavaScript-X3DOM學習筆記(三)-route型別節點功能的演示

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>