實驗八 飛舞的蝴蝶

1、實驗八 X3D之蝴蝶飛舞一、實驗目的1、掌握X3D時間軸和平移旋轉(zhuǎn)動畫效果；2、掌握X3D背景天空的設置；3、掌握X3D霧化效果； 4、掌握X3D文字設定； 5、掌握X3D視點和導航設置。二、實驗環(huán)境 硬件要求：PC機，主流配置，最好為獨立顯卡，顯存512M以上。 軟件環(huán)境：操作系統(tǒng)：Windows XP、Windows 7。應用軟件： XML編輯器、X3D瀏覽器三、實驗內(nèi)容與要求要求： 1) 將案例用到的3D模型、貼圖、X3D源文件工程文件夾打包上傳 。 打包格式：學號姓名-實驗序號-案例名稱.rar 。 2） 將實驗小結(jié)（包括收獲、自我評價、建議與問題） 填到 內(nèi)容空白處。 內(nèi)容：在上次蝴

2、蝶模型基礎(chǔ)上，添加蝴蝶飛舞動畫、天空背景、霧化效果、文字顯以及視點和導航功能。（1）、打開stick.X3D文件，研究X3D旋轉(zhuǎn)動畫語法語句1<TimeSensor DEF='TIME' cycleInterval='10' loop='true'/>時間觸發(fā)器 TimeSensor當時間流逝時,TimeSensor不斷的產(chǎn)生事件. 典型運用: ROUTE thisTimeSensor.fraction_changed TO someInterpolator.set_fraction. 概貌互換提示: 如果cycleInterval

3、< 0.01 秒, TimeSensor 可能被忽視.DEFDEF ID #IMPLIEDDEF給這個節(jié)點定義了唯一的ID, 這樣在其它節(jié)點里就可以引用這個節(jié)點. 提示: 為DEF命名時,使用有意義的描述性的名稱可以幫助規(guī)范文件, 以提高文件可讀性. cycleIntervalcycleInterval accessType inputOutput, type SFTime CDATA "1.0"cycleInterval 用來設置循環(huán)的時間. 概貌互換提示: 如果cycleInterval < 0.01 秒, TimeSensor 可能被忽視. looploo

4、p accessType inputOutput, type SFBool (true|false) "false"當loop=true時循環(huán), 當loop=false只運行一次. fraction_changedfraction_changed accessType outputOnly, type SFFloat CDATA #FIXED ""fraction_changed 持續(xù)發(fā)送0,1 范圍之間的值以提供當前循環(huán)的進程. 語句2<OrientationInterpolator DEF='INPO' key='0 0

5、.25 0.5 0.75 1' keyValue='0 0 1 0 0 0 1 1.57 0 0 1 3.14 0 0 1 4.71 0 0 1 6.28'/>插值器節(jié)點OrientationInterpolator 產(chǎn)生指定范圍內(nèi)的一系列方向值 結(jié)果可以被路由到 <Transform> 節(jié)點的 'rotation'屬性 或另一個Rotations屬性中 典型輸入: ROUTE someTimeSensor.fraction_changed TO someInterpolator.set_fraction 典型輸出: ROUTE som

6、eInterpolator.value_changed TO destinationNode.set_attribute.DEFDEF ID #IMPLIEDDEF給這個節(jié)點定義了唯一的ID, 這樣在其它節(jié)點里就可以引用這個節(jié)點. 提示: 為DEF命名時,使用有意義的描述性的名稱可以幫助規(guī)范文件, 以提高文件可讀性. keykey accessType inputOutput, type MFFloat CDATA #IMPLIED定義線性插值器的時間間隔, 按照順序增加, 對應相應的keyValue. 提示: key 和keyValue的數(shù)量必須一致! keyValuekeyValue ac

7、cessType inputOutput, type MFRotation CDATA #IMPLIED對應key的相應關(guān)鍵值, 用來進行相應時間段的線性插值. 提示: key 和keyValue的數(shù)量必須一致! set_fractionset_fraction: inputOnly type SFFloat CDATA #FIXED ""set_fraction 輸入一個key 值, 以進行相應的keyValue 輸出. value_changedvalue_changed accessType outputOnly, type SFRotation CDATA #FIX

8、ED ""按照相應的key和keyValue對, 輸出相應時間段的線性插值 語句3 語句4<ROUTE fromField='fraction_changed' fromNode='TIME' toField='set_fraction' toNode='INPO'/><ROUTE fromField='value_changed' fromNode='INPO' toField='rotation' toNode='STICK'

9、/>ROUTE 連接節(jié)點之間的域以傳遞事件.2）打開ball.x3d, 研究X3D平移動畫語法<TimeSensor DEF='TIME' loop='true'/><PositionInterpolator DEF='INPO' key='0 0.25 0.5 1' keyValue='0 0 0 3 0 0 0 0 0 -3 0 0'/><ROUTE fromField='fraction_changed' fromNode='TIME' to

10、Field='set_fraction' toNode='INPO'/><ROUTE fromField='value_changed' fromNode='INPO' toField='translation' toNode='BALL'/>PositionInterpolator 產(chǎn)生指定范圍內(nèi)的一系列三維值. 結(jié)果可以被路由到一個<Transform> 節(jié)點的'translation' 屬性 或另一個Vector3Float 屬性 典型輸入: RO

11、UTE someTimeSensor.fraction_changed TO someInterpolator.set_fraction 典型輸出: ROUTE someInterpolator.value_changed TO destinationNode.set_attribute.DEFDEF ID #IMPLIEDDEF給這個節(jié)點定義了唯一的ID, 這樣在其它節(jié)點里就可以引用這個節(jié)點. 提示: 為DEF命名時,使用有意義的描述性的名稱可以幫助規(guī)范文件, 以提高文件可讀性. keykey accessType inputOutput, type MFFloat CDATA #IMPLI

12、ED定義線性插值器的時間間隔, 按照順序增加, 對應相應的keyValue. 提示: key 和keyValue的數(shù)量必須一致! keyValuekeyValue accessType inputOutput, type MFVec3f CDATA #IMPLIED對應key的相應關(guān)鍵值, 用來進行相應時間段的線性插值. 提示: key 和keyValue的數(shù)量必須一致! set_fractionset_fraction: inputOnly type SFFloat CDATA #FIXED ""set_fraction 輸入一個key 值, 以進行相應的keyValue

13、 輸出. value_changedvalue_changed accessType outputOnly, type SFVec3f CDATA #FIXED ""按照相應的key和keyValue對, 輸出相應時間段的線性插值 3）打開蝴蝶X3D文件 美麗的蝴蝶呈現(xiàn)在眼前點擊瀏覽器 View的 Console 可查看代碼錯誤。4）修改代碼，讓蝴蝶動起來，并加天空盒、霧化、文字、視點和導航等功能 a) 給蝴蝶翅膀 4個圓柱體添加名稱，方便查找 <Transform scale="15.0 0.03 10" translation="2.

14、8 0 0" rotation="0 0.5 0 0.5">變?yōu)?<Transform DEF='FLY' scale="15.0 0.03 10" translation="2.8 0 0" rotation="0 0.5 0 0.5"><Transform scale="15.0 0.03 10" translation="-2.8 0 0" rotation="0 0.5 0 -0.5">變?yōu)?

15、lt;Transform DEF='FLY2' scale="15.0 0.03 10" translation="-2.8 0 0" rotation="0 0.5 0 -0.5"><Transform scale="12.0 0.03 8" translation="-2.3 0 3" rotation="0 0.5 0 0.5">變?yōu)?lt;Transform DEF='FLY3' scale="12.0 0.

16、03 8" translation="-2.3 0 3" rotation="0 0.5 0 0.5"><Transform scale="12.0 0.03 8" translation="2.3 0 3" rotation="0 0.5 0 -0.5">變?yōu)?lt;Transform DEF='FLY4' scale="12.0 0.03 8" translation="2.3 0 3" rotation=&

17、quot;0 0.5 0 -0.5">b)添加時間觸發(fā)器TimeSensor，為動畫做準備<TimeSensor DEF='TIME' cycleInterval='10' loop='true'/>位置：可放在場景<Scene>之后c)添加方向插值器OrientationInterpolator，設置旋轉(zhuǎn)動畫中間幀<OrientationInterpolator DEF='INPO' key='0 0.25 0.5 0.75 1' keyValue='0 0

18、1 0 0 0 1 0.6 0 0 1 0 0 0 1 -0.6 0 0 1 0'/>位置：在時間觸發(fā)器后d) 添加ROUTE連接語句 分別連接時間觸發(fā)器和插值器 ，連接插值器和翅膀節(jié)點<ROUTE fromField='fraction_changed' fromNode='TIME' toField='set_fraction' toNode='INPO'/>位置：可放在插值器INFO之后<ROUTE fromField='value_changed' fromNode='

19、;INPO' toField='rotation' toNode='FLY'/>位置：可放在FLY節(jié)點之后e)修改代碼， 旋轉(zhuǎn)軸 由翅膀中心 改為 翅膀的一側(cè)，此步驟很關(guān)鍵，一定要搞懂Transform 是一個可以包含其它節(jié)點的組節(jié)點. 提示: +Y 軸是上方. (有時+X 是北方, +Z 是東方.) 設定+Y 為上以保持場景的兼容性和瀏覽器的正常瀏覽. 提示: 在增加 geometry或 Appearance節(jié)點之前先插入一個Shape節(jié)點.centercenter accessType inputOutput, type SFVec3f CDA

20、TA "0 0 0"從局部坐標原點的位移偏移, 現(xiàn)于旋轉(zhuǎn)和縮放. 提示: 操作順序是,先旋轉(zhuǎn)方位 - 縮放, 然后按中心旋轉(zhuǎn), 然后移動. 第一個翅膀：<Transform DEF='FLY' scale="15.0 0.03 10" translation="2.8 0 0" rotation="0 0.5 0 0.5">改為<Transform DEF='FLY' center="-0.2 0 0" scale="15.0 0.03

21、 10" rotation="0 0.5 0 0.5"> 其余三個翅膀以此類推，注意 運動的方向 對稱、有節(jié)拍、角度的調(diào)整提示： 另外增設3個 方向插值器，放在時間觸發(fā)器之后 另外增設6調(diào) ROUTE連接語句，分別置于 另外3個翅膀形狀之后。設置好后，將X3D文件另存為butterfly_1.x3d 文件 ，退出 f) 新建 x3D 文件新建一個 butterfly.x3d 空框架文件<X3D profile="Immersive" version="3.1"> <head><meta c

22、ontent="butterfly.x3d" name="filename"/><meta content="bnuz" name="author"/> </head> <Scene > </Scene></X3D>h) 在新文件中 添加背景天空代碼<Background backUrl='back.png' bottomUrl='bottom.png' frontUrl='front.png'

23、leftUrl='left.png' rightUrl='right.png' topUrl='top.png'/>位置：<Scene>之后 Background 節(jié)點使用一組垂直排列的色彩值來模擬地面和天空, Background 也可以在六個面上使用背景紋理. Background, Fog, NavigationInfo, TextureBackground, Viewpoint 節(jié)點都是可綁定節(jié)點.skyColorskyColor accessType inputOutput, type MFColor CDATA &q

24、uot;0 0 0"天空半球上不同角度的顏色. 弧度角0.0時為第一個值, 描述了天頂(抬頭)的顏色. 警告: skyColor 值必須比skyAngle值多一個.警告: skyAngle=0 時的colors值將被忽略. 概貌互換提示: 可能只渲染一個顏色, 其它顏色將被忽略. skyAngleskyAngle accessType inputOutput, type MFFloat CDATA #IMPLIED0.pi 弧度角度從0.0 (天頂) 增加到 /2=1.57 (水平) 到 =3.14159 (天底). 警告: skyColor 值必須比skyAngle值多一個. 警告

25、: skyAngle=0 時的色彩值將被忽略. 概貌互換提示: 這個域可能被忽略. groundColorgroundColor accessType inputOutput, type MFColor CDATA #IMPLIED地面半球上不同角度的顏色. 弧度角0.0 時為第一個值, 描述了天底(低頭)的顏色. 警告: groundColor值必須比groundAngle值多一個. 概貌互換提示: 這個域可能被忽略. groundAnglegroundAngle accessType inputOutput, type MFFloat CDATA #IMPLIED0.pi/2 弧度角度從0

26、.0 (天底) 增加到 /2=1.57 (水平). 警告: groundColor值必須比groundAngle值多一個. 警告: groundAngle=0 時的色彩值將被忽略. 概貌互換提示: 這個域可能被忽略. frontUrlfrontUrl accessType inputOutput, type MFString CDATA #IMPLIED場景中天空地面背景使用的全景圖. 提示: 字符串可以是多值, 用引號分割每個字符串 "" "" "其它網(wǎng)址."

27、. 提示: " 的XML 編碼 是 &quot; (字符實體). 警告: http鏈接要嚴格匹配目錄和文件名的兼容性! 提示: url 中的每個空格符用 %20 替換掉. 概貌互換提示: 這個域可能被忽略. backUrlbackUrl accessType inputOutput, type MFString CDATA #IMPLIED場景中天空地面背景使用的全景圖. 提示: 字符串可以是多值, 用引號分割每個字符串 "" "" "其它網(wǎng)址."

28、; . 提示: " 的XML 編碼 是 &quot; (字符實體). 警告: http鏈接要嚴格匹配目錄和文件名的兼容性! 提示: url 中的每個空格符用 %20 替換掉. 概貌互換提示: 這個域可能被忽略. leftUrlleftUrl accessType inputOutput, type MFString CDATA #IMPLIED場景中天空地面背景使用的全景圖. 提示: 字符串可以是多值, 用引號分割每個字符串 "" "" "其它網(wǎng)址.&qu

29、ot; . 提示: " 的XML 編碼 是 &quot; (字符實體). 警告: http鏈接要嚴格匹配目錄和文件名的兼容性! 提示: url 中的每個空格符用 %20 替換掉. 概貌互換提示: 這個域可能被忽略. rightUrlrightUrl accessType inputOutput, type MFString CDATA #IMPLIED場景中天空地面背景使用的全景圖. 提示: 字符串可以是多值, 用引號分割每個字符串 "" "" "其它網(wǎng)址

30、." . 提示: " 的XML 編碼 是 &quot; (字符實體). 警告: http鏈接要嚴格匹配目錄和文件名的兼容性! 提示: url 中的每個空格符用 %20 替換掉. 概貌互換提示: 這個域可能被忽略. topUrltopUrl accessType inputOutput, type MFString CDATA #IMPLIED場景中天空地面背景使用的全景圖. 提示: 字符串可以是多值, 用引號分割每個字符串 "" "" "其它網(wǎng)址

31、." . 提示: " 的XML 編碼 是 &quot; (字符實體). 警告: http鏈接要嚴格匹配目錄和文件名的兼容性! 提示: url 中的每個空格符用 %20 替換掉. 概貌互換提示: 這個域可能被忽略. bottomUrlbottomUrl accessType inputOutput, type MFString CDATA #IMPLIED場景中天空地面背景使用的全景圖. 提示: 字符串可以是多值, 用引號分割每個字符串 "" "" &quo

32、t;其它網(wǎng)址." . 提示: " 的XML 編碼 是 &quot; (字符實體). 警告: http鏈接要嚴格匹配目錄和文件名的兼容性! 提示: url 中的每個空格符用 %20 替換掉. 概貌互換提示: 這個域可能被忽略. i) 在butterfly.x3d 文件中 添加霧化代碼<Fog fogType='EXPONETIAL' visibilityRange='60'/>位置：背景天空后Fog 節(jié)點通過混合遠處的物體的顏色和霧的顏色來模擬大氣效果. Background, Fog, NavigationInfo, Te

33、xtureBackground, Viewpoint 節(jié)點都是可綁定節(jié)點.colorcolor accessType inputOutput, type SFColor CDATA "1.0 1.0 1.0".設置霧的顏色 提示: 和背景顏色設置相同值可以使對象淡入背景. fogTypefogType accessType inputOutput, type SFString CDATA (LINEAR|EXPONENTIAL) "LINEAR"用 LINEAR 或 EXPONENTIAL值來制定霧化的加強方式. 提示: EXPONENTIAL 更加現(xiàn)實

34、但要花費更多的資源計算. visibilityRangevisibilityRange accessType inputOutput, type SFFloat CDATA "0.0"設置在多遠的距離外物體完全消失在霧中, 使用局部坐標系統(tǒng)并以米為單位. 提示: visibilityRange 0 將禁止Fog. j) 在butterfly.x3d 文件中添加文字,加上自己的學號姓名Text 是一個幾何節(jié)點用以顯示文字, 可以包含F(xiàn)ontStyle節(jié)點以設置字體. 提示: 在增加 geometry或 Appearance節(jié)點之前先插入一個Shape節(jié)點. 在瀏覽器處理此場景

35、內(nèi)容時, 可以用符合類型定義的原型 ProtoInstance來替代.stringstring accessType inputOutput, type MFString CDATA #IMPLIED. 提示: 字符串可以是多值, 用引號分割每個字符串 提示: 字符串包含引號中套用的引號時, 在內(nèi)層的引號前加反斜杠 例子: "say "hello" please" 提示: 如果需要,許多XML工具自動替換涉及的XML字符 (像 & 替換為&#38; 或 " 替換為&#34; ). lengthlength accessT

36、ype inputOutput, type MFFloat CDATA #IMPLIED每個字符串變量的長度值的數(shù)組, 參照局部坐標系統(tǒng). 每個字符串將被伸展或壓縮. <Transform translation="5 2 0"> <Shape><Text length="3 3" string='"學號" "姓名"'> <FontStyle style='"BOLD" "ITALIC"'/> &

37、lt;/Text> </Shape> </Transform>位置： 置于霧節(jié)點之后 k) 在butterfly.x3d 文件中視點設置Viewpoint節(jié)點Viewpoint 指定用戶視點在場景中的位置和方向. Background, Fog, NavigationInfo, TextureBackground, Viewpoint 節(jié)點都是可綁定節(jié)點.DEFDEF ID #IMPLIEDDEF給這個節(jié)點定義了唯一的ID, 這樣在其它節(jié)點里就可以引用這個節(jié)點. 提示: 為DEF命名時,使用有意義的描述性的名稱可以幫助規(guī)范文件, 以提高文件可讀性. descrip

38、tiondescription accessType initializeOnly, type SFString CDATA #IMPLIED為這個視點顯示的文字描述或?qū)Ш教崾? 提示: 使用空格, 使描述更清晰易讀. 警告: 沒有description值的視點將不顯示在瀏覽器的視點菜單里. 提示: 如果需要,許多XML工具自動替換涉及的XML字符 (像 & 替換為&#38; 或 " 替換為&#34; ). 概貌互換提示: 這個域可能被忽略. positionposition accessType inputOutput, type SFVec3f CDATA

39、 "0 0 10"視點位置, 相對局部坐標系統(tǒng)(x, y, z 以米為單位). orientationorientation accessType inputOutput, type SFRotation CDATA "0 0 1 0"視點方向(軸, 弧度角) , 相對局部坐標系統(tǒng), 缺省為Z軸方向. 提示: 這個方向從缺省的(0 0 -1)方向變化而來. 提示: 復雜的旋轉(zhuǎn)可以用父Transform的軸對軸旋轉(zhuǎn)完成. <Viewpoint position='0 0 20' />位置：放在<Scene>代碼之后l

40、) 在butterfly.x3d 文件中背景音樂播放添加音樂節(jié)點，<Sound><AudioClip loop='true' url='"1.wav"'/> </Sound>位置：可放在背景或霧化之后Sound 包含了一個AudioClip或MovieTexture節(jié)點以進行聲音回放 在瀏覽器處理此場景內(nèi)容時, 可以用符合類型定義的原型 ProtoInstance來替代.AudioClip 提供音頻數(shù)據(jù)給 <Sound> 節(jié)點. 提示: 先添加 Sound 節(jié)點DEFDEF ID #IMPLIEDDEF給這個節(jié)點定義了唯一的ID, 這樣在其它節(jié)點里就可以引用這個節(jié)點. 提示: 為DEF命名時,使用有意義的描述性的名稱可以幫助規(guī)范文件, 以提高文件可讀性. descriptiondescription accessType inputOutput, type SFString CDATA #IMPLIED此節(jié)點顯示的提示文本. 提示: 如果需要,許多XML工具自動替換涉及的XML字符 (像 & 替換為&#38; 或 " 替換為&#34; ). urlurl accessType inputOutpu