实验八 飞舞的蝴蝶

1、实验八 X3D之蝴蝶飞舞一、实验目的1、掌握X3D时间轴和平移旋转动画效果；2、掌握X3D背景天空的设置；3、掌握X3D雾化效果； 4、掌握X3D文字设定； 5、掌握X3D视点和导航设置。二、实验环境 硬件要求：PC机，主流配置，最好为独立显卡，显存512M以上。 软件环境：操作系统：Windows XP、Windows 7。应用软件： XML编辑器、X3D浏览器三、实验内容与要求要求： 1) 将案例用到的3D模型、贴图、X3D源文件工程文件夹打包上传 。 打包格式：学号姓名-实验序号-案例名称.rar 。 2） 将实验小结（包括收获、自我评价、建议与问题） 填到 内容空白处。 内容：在上次蝴

2、蝶模型基础上，添加蝴蝶飞舞动画、天空背景、雾化效果、文字显以及视点和导航功能。（1）、打开stick.X3D文件，研究X3D旋转动画语法语句1<TimeSensor DEF='TIME' cycleInterval='10' loop='true'/>时间触发器 TimeSensor当时间流逝时,TimeSensor不断的产生事件. 典型运用: ROUTE thisTimeSensor.fraction_changed TO someInterpolator.set_fraction. 概貌互换提示: 如果cycleInterval

3、< 0.01 秒, TimeSensor 可能被忽视.DEFDEF ID #IMPLIEDDEF给这个节点定义了唯一的ID, 这样在其它节点里就可以引用这个节点. 提示: 为DEF命名时,使用有意义的描述性的名称可以帮助规范文件, 以提高文件可读性. cycleIntervalcycleInterval accessType inputOutput, type SFTime CDATA "1.0"cycleInterval 用来设置循环的时间. 概貌互换提示: 如果cycleInterval < 0.01 秒, TimeSensor 可能被忽视. looploo

4、p accessType inputOutput, type SFBool (true|false) "false"当loop=true时循环, 当loop=false只运行一次. fraction_changedfraction_changed accessType outputOnly, type SFFloat CDATA #FIXED ""fraction_changed 持续发送0,1 范围之间的值以提供当前循环的进程. 语句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'/>插值器节点OrientationInterpolator 产生指定范围内的一系列方向值 结果可以被路由到 <Transform> 节点的 'rotation'属性 或另一个Rotations属性中 典型输入: ROUTE someTimeSensor.fraction_changed TO someInterpolator.set_fraction 典型输出: ROUTE som

6、eInterpolator.value_changed TO destinationNode.set_attribute.DEFDEF ID #IMPLIEDDEF给这个节点定义了唯一的ID, 这样在其它节点里就可以引用这个节点. 提示: 为DEF命名时,使用有意义的描述性的名称可以帮助规范文件, 以提高文件可读性. keykey accessType inputOutput, type MFFloat CDATA #IMPLIED定义线性插值器的时间间隔, 按照顺序增加, 对应相应的keyValue. 提示: key 和keyValue的数量必须一致! keyValuekeyValue ac

7、cessType inputOutput, type MFRotation CDATA #IMPLIED对应key的相应关键值, 用来进行相应时间段的线性插值. 提示: key 和keyValue的数量必须一致! 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 连接节点之间的域以传递事件.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 产生指定范围内的一系列三维值. 结果可以被路由到一个<Transform> 节点的'translation' 属性 或另一个Vector3Float 属性 典型输入: RO

11、UTE someTimeSensor.fraction_changed TO someInterpolator.set_fraction 典型输出: ROUTE someInterpolator.value_changed TO destinationNode.set_attribute.DEFDEF ID #IMPLIEDDEF给这个节点定义了唯一的ID, 这样在其它节点里就可以引用这个节点. 提示: 为DEF命名时,使用有意义的描述性的名称可以帮助规范文件, 以提高文件可读性. keykey accessType inputOutput, type MFFloat CDATA #IMPLI

12、ED定义线性插值器的时间间隔, 按照顺序增加, 对应相应的keyValue. 提示: key 和keyValue的数量必须一致! keyValuekeyValue accessType inputOutput, type MFVec3f CDATA #IMPLIED对应key的相应关键值, 用来进行相应时间段的线性插值. 提示: key 和keyValue的数量必须一致! 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文件 美丽的蝴蝶呈现在眼前点击浏览器 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">变为 <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">变为&

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">变为<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">变为<Transform DEF='FLY4' scale="12.0 0.03 8" translation="2.3 0 3" rotation=&

17、quot;0 0.5 0 -0.5">b)添加时间触发器TimeSensor，为动画做准备<TimeSensor DEF='TIME' cycleInterval='10' loop='true'/>位置：可放在场景<Scene>之后c)添加方向插值器OrientationInterpolator，设置旋转动画中间帧<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'/>位置：在时间触发器后d) 添加ROUTE连接语句 分别连接时间触发器和插值器 ，连接插值器和翅膀节点<ROUTE fromField='fraction_changed' fromNode='TIME' toField='set_fraction' toNode='INPO'/>位置：可放在插值器INFO之后<ROUTE fromField='value_changed' fromNode='

19、;INPO' toField='rotation' toNode='FLY'/>位置：可放在FLY节点之后e)修改代码， 旋转轴 由翅膀中心 改为 翅膀的一侧，此步骤很关键，一定要搞懂Transform 是一个可以包含其它节点的组节点. 提示: +Y 轴是上方. (有时+X 是北方, +Z 是东方.) 设定+Y 为上以保持场景的兼容性和浏览器的正常浏览. 提示: 在增加 geometry或 Appearance节点之前先插入一个Shape节点.centercenter accessType inputOutput, type SFVec3f CDA

20、TA "0 0 0"从局部坐标原点的位移偏移, 现于旋转和缩放. 提示: 操作顺序是,先旋转方位 - 缩放, 然后按中心旋转, 然后移动. 第一个翅膀：<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"> 其余三个翅膀以此类推，注意 运动的方向 对称、有节拍、角度的调整提示： 另外增设3个 方向插值器，放在时间触发器之后 另外增设6调 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 节点使用一组垂直排列的色彩值来模拟地面和天空, Background 也可以在六个面上使用背景纹理. Background, Fog, NavigationInfo, TextureBackground, Viewpoint 节点都是可绑定节点.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场景中天空地面背景使用的全景图. 提示: 字符串可以是多值, 用引号分割每个字符串 "" "" "其它网址."

27、. 提示: " 的XML 编码 是 &quot; (字符实体). 警告: http链接要严格匹配目录和文件名的兼容性! 提示: url 中的每个空格符用 %20 替换掉. 概貌互换提示: 这个域可能被忽略. backUrlbackUrl accessType inputOutput, type MFString CDATA #IMPLIED场景中天空地面背景使用的全景图. 提示: 字符串可以是多值, 用引号分割每个字符串 "" "" "其它网址."

28、; . 提示: " 的XML 编码 是 &quot; (字符实体). 警告: http链接要严格匹配目录和文件名的兼容性! 提示: url 中的每个空格符用 %20 替换掉. 概貌互换提示: 这个域可能被忽略. leftUrlleftUrl accessType inputOutput, type MFString CDATA #IMPLIED场景中天空地面背景使用的全景图. 提示: 字符串可以是多值, 用引号分割每个字符串 "" "" "其它网址.&qu

29、ot; . 提示: " 的XML 编码 是 &quot; (字符实体). 警告: http链接要严格匹配目录和文件名的兼容性! 提示: url 中的每个空格符用 %20 替换掉. 概貌互换提示: 这个域可能被忽略. rightUrlrightUrl accessType inputOutput, type MFString CDATA #IMPLIED场景中天空地面背景使用的全景图. 提示: 字符串可以是多值, 用引号分割每个字符串 "" "" "其它网址

30、." . 提示: " 的XML 编码 是 &quot; (字符实体). 警告: http链接要严格匹配目录和文件名的兼容性! 提示: url 中的每个空格符用 %20 替换掉. 概貌互换提示: 这个域可能被忽略. topUrltopUrl accessType inputOutput, type MFString CDATA #IMPLIED场景中天空地面背景使用的全景图. 提示: 字符串可以是多值, 用引号分割每个字符串 "" "" "其它网址

31、." . 提示: " 的XML 编码 是 &quot; (字符实体). 警告: http链接要严格匹配目录和文件名的兼容性! 提示: url 中的每个空格符用 %20 替换掉. 概貌互换提示: 这个域可能被忽略. bottomUrlbottomUrl accessType inputOutput, type MFString CDATA #IMPLIED场景中天空地面背景使用的全景图. 提示: 字符串可以是多值, 用引号分割每个字符串 "" "" &quo

32、t;其它网址." . 提示: " 的XML 编码 是 &quot; (字符实体). 警告: http链接要严格匹配目录和文件名的兼容性! 提示: url 中的每个空格符用 %20 替换掉. 概貌互换提示: 这个域可能被忽略. i) 在butterfly.x3d 文件中 添加雾化代码<Fog fogType='EXPONETIAL' visibilityRange='60'/>位置：背景天空后Fog 节点通过混合远处的物体的颜色和雾的颜色来模拟大气效果. Background, Fog, NavigationInfo, Te

33、xtureBackground, Viewpoint 节点都是可绑定节点.colorcolor accessType inputOutput, type SFColor CDATA "1.0 1.0 1.0".设置雾的颜色 提示: 和背景颜色设置相同值可以使对象淡入背景. fogTypefogType accessType inputOutput, type SFString CDATA (LINEAR|EXPONENTIAL) "LINEAR"用 LINEAR 或 EXPONENTIAL值来制定雾化的加强方式. 提示: EXPONENTIAL 更加现实

34、但要花费更多的资源计算. visibilityRangevisibilityRange accessType inputOutput, type SFFloat CDATA "0.0"设置在多远的距离外物体完全消失在雾中, 使用局部坐标系统并以米为单位. 提示: visibilityRange 0 将禁止Fog. j) 在butterfly.x3d 文件中添加文字,加上自己的学号姓名Text 是一个几何节点用以显示文字, 可以包含FontStyle节点以设置字体. 提示: 在增加 geometry或 Appearance节点之前先插入一个Shape节点. 在浏览器处理此场景

35、内容时, 可以用符合类型定义的原型 ProtoInstance来替代.stringstring accessType inputOutput, type MFString CDATA #IMPLIED. 提示: 字符串可以是多值, 用引号分割每个字符串 提示: 字符串包含引号中套用的引号时, 在内层的引号前加反斜杠 例子: "say "hello" please" 提示: 如果需要,许多XML工具自动替换涉及的XML字符 (像 & 替换为&#38; 或 " 替换为&#34; ). lengthlength accessT

36、ype inputOutput, type MFFloat CDATA #IMPLIED每个字符串变量的长度值的数组, 参照局部坐标系统. 每个字符串将被伸展或压缩. <Transform translation="5 2 0"> <Shape><Text length="3 3" string='"学号" "姓名"'> <FontStyle style='"BOLD" "ITALIC"'/> &

37、lt;/Text> </Shape> </Transform>位置： 置于雾节点之后 k) 在butterfly.x3d 文件中视点设置Viewpoint节点Viewpoint 指定用户视点在场景中的位置和方向. Background, Fog, NavigationInfo, TextureBackground, Viewpoint 节点都是可绑定节点.DEFDEF ID #IMPLIEDDEF给这个节点定义了唯一的ID, 这样在其它节点里就可以引用这个节点. 提示: 为DEF命名时,使用有意义的描述性的名称可以帮助规范文件, 以提高文件可读性. descrip

38、tiondescription accessType initializeOnly, type SFString CDATA #IMPLIED为这个视点显示的文字描述或导航提示. 提示: 使用空格, 使描述更清晰易读. 警告: 没有description值的视点将不显示在浏览器的视点菜单里. 提示: 如果需要,许多XML工具自动替换涉及的XML字符 (像 & 替换为&#38; 或 " 替换为&#34; ). 概貌互换提示: 这个域可能被忽略. positionposition accessType inputOutput, type SFVec3f CDATA

39、 "0 0 10"视点位置, 相对局部坐标系统(x, y, z 以米为单位). orientationorientation accessType inputOutput, type SFRotation CDATA "0 0 1 0"视点方向(轴, 弧度角) , 相对局部坐标系统, 缺省为Z轴方向. 提示: 这个方向从缺省的(0 0 -1)方向变化而来. 提示: 复杂的旋转可以用父Transform的轴对轴旋转完成. <Viewpoint position='0 0 20' />位置：放在<Scene>代码之后l

40、) 在butterfly.x3d 文件中背景音乐播放添加音乐节点，<Sound><AudioClip loop='true' url='"1.wav"'/> </Sound>位置：可放在背景或雾化之后Sound 包含了一个AudioClip或MovieTexture节点以进行声音回放 在浏览器处理此场景内容时, 可以用符合类型定义的原型 ProtoInstance来替代.AudioClip 提供音频数据给 <Sound> 节点. 提示: 先添加 Sound 节点DEFDEF ID #IMPLIEDDEF给这个节点定义了唯一的ID, 这样在其它节点里就可以引用这个节点. 提示: 为DEF命名时,使用有意义的描述性的名称可以帮助规范文件, 以提高文件可读性. descriptiondescription accessType inputOutput, type SFString CDATA #IMPLIED此节点显示的提示文本. 提示: 如果需要,许多XML工具自动替换涉及的XML字符 (像 & 替换为&#38; 或 " 替换为&#34; ). urlurl accessType inputOutpu