实验八 飞舞的蝴蝶.docx
实验八X3D之蝴蝶飞舞一、实验目的1、掌握X3D时间轴和平移旋转动画效果；2、掌握X3D背景天空的设置；3、掌握X3D雾化效果；4、掌握X3D文字设定；5、掌握X3D视点和导航设置。二、实验环境硬件要求：PC机，主流配置，最好为独立显卡，显存512M以上。软件环境：操作系统：Windows XP、Windows 7。应用软件：XML编辑器、X3D浏览器三、实验内容与要求要求：1）将案例用到的3D模型、贴图、X3D源文件工程文件夹打包上传。打包 格式：学号姓名-实验序号-案例名称.rar。2）将实验小结（包括收获、自我评价、建议与问题） 填到 内容空白处。内容：在上次蝴蝶模型基础上，添加蝴蝶飞舞动画、天空背景、雾化效果、文字显 以及视点和导航功能。（1）、打开stick.X3D文件，研究X3D旋转动画语法语句1<TimeSensor DEF='TIME' cycleInterval='10' loop='true'/>时间触发器TimeSensor当时间流逝时,TimeSensor不断的产生事件 典型运用：ROUTE thisTimeSensor.fraction_changed TO someInterpolator.set_fraction.概貌互换提示：如果cyclelnterval < 0.01秒,TimeSensor可能被忽视.DEFDEF ID #IMPLIEDDEF给这个节点定义了唯一的ID,这样在其它节点里就 可以引用这个节点.提示：为DEF命名时，使用有意义的描述性的名称可以帮 助规范文件，以提高文件可读性.cycleIntervalcycleInterval accessType inputOutput, type SFTimeCDATA "1.0"cycleInterval用来设置循环的时间.概貌互换提示：如果cycleInterval < 0.01秒， TimeSensor可能被忽视.looploop 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.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 628'/>插值器节点Orientationinterpolator产生指定范围内的一系列方向值 结果可以被路由到 <Transform>节点的'rotation,属性 或另一个 Rotations属性中 典型输入:ROUTE 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 #IMPLIED定义线性插值器的时间间隔，按照顺序增加，对应相应的 keyValue.提示：key和keyValue的数量必须 致！keyValuekeyValue accessType 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 #FIXED "按照相应的key和keyValue对，输出相应时间段的线性插值语句3语句4fromNode='TIME'<ROUTEfromField='fraction_changed'toField='set_fraction' toNode='INPO'/> <ROUTE fromField='value_changed' fromNode='INPO' toField='rotation' toNode='STICK'/>ROUTE连接节点之间的域以传递事件.2）打开ball.x3d,研究X3D平移动画语法<TimeSensor DEF='TJME* loop='true'/><PositionInterpolator DEF=*JNPO* key='0 0.25 0.5 1' keyValue='0 0 0 3 0 0 0 0 0 -3 0 0'/> <ROUTEfromField='fraction_changed'fromNode='TIME'toField='set_fraction'toNode='INPO'/><ROUTE fromField='value_changed'fromNode='INPO'toField='translation'toNode='BALL'/>PositionInterpolator产生指定范围内的一系列三维值结果可以被路由到一个 <Transform> 节点的'translation'属性 或另一个 Vector3Float 属性 典型输入：ROUTE 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 #IMPLIED定义线性插值器的时间间隔，按照顺序增加，对应相应的 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输 出.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.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"> b）添加时间触发器TimeSensor，为动画做准备 <TimeSensor DEF='TIME' cycleInterval='10' loop='true'/> 位置：可放在场景<Scene>之后<Transform变为<Transformscale="15.0 0.03 10" translation="-2.8 0 0" rotation="0 0.5 0 -0.5">DEF='FLY2' scale="15.0 0.03 10" translation="-2.8 0 0" rotation="0 0.5 0 -0.5"><Transform变为<Transformscale="12.0 0.03 8" translation="-2.3 0 3" rotation="0 0.5 0 0.5">DEF='FLY3' scale="12.0 0.03 8" translation="-2.3 0 3" rotation="0 0.5 0 0.5"><Transform变为<Transformscale="12.0 0.03 8" translation="2.3 0 3" rotation="0 0.5 0 -0.5">DEF='FLY4' scale="12.0 0.03 8" translation="2.3 0 3" rotation="0 0.5 0 -0.5">c）添加方向插值器Orientationinterpolator，设置旋转动画中间帧<OrientationInterpolator DEF='INPO' key='0 0.25 0.5 0.75 1' keyValue='0 0 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='INPO' toField='rotation' toNode='FLY'/>位置：可放在FLY节点之后e）修改代码，旋转轴由翅膀中心改为翅膀的一侧，此步骤很关键，一定要搞懂 Transform是一个可以包含其它节点的组节点.提示：+Y轴是上方（有时+X是北方,+Z是东方）设定+Y为上以保持场景的兼容性和浏 览器的正常浏览.提示：在增加geometry或Appearance节点之前先插入一个Shape节点.center center accessType inputOutput, type SFVec3f CDATA "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 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 content="butterfly.x3d" name="filename"/><meta content="bnuz" name="author"/></head><Scene ></Scene></X3D>h）在新文件中添加背景天空代码<Background backUrl='back.png'bottomUrl='bottom.png'frontUrl='front.png'leftUrl='left.png'rightUrl='right.png'topUrl='top.png'/>位置：<Scene>之后Background节点使用一组垂直排列的色彩值来模拟地面和天空，Background也可以在六 个面上使用背景纹理.Background, Fog, Navigationinfo, TextureBackground, Viewpoint 节 点都是可绑定节点.skyColorskyColor accessType inputOutput, type MFColor CDATA "0 0天空半球上不同角度的颜色.弧度角0.0时为第一个值，描述了 天顶（抬头）的颜色.警告：skyColor值必须比skyAngle值多一个.警告：skyAngle=0时的colors值将被忽略.概貌互换提示：可能只渲染一个颜色，其它颜色将被忽略.skyAngleskyAngle accessType inputOutput, type MFFloat CDATA #IMPLIED0.pi弧度角度从0.0 （天顶）增加到n /2=1.57 （水平）到 n =3.14159 （天底）.警告：skyColor值必须比skyAngle值多一个.警告：skyAngle=0时的色彩值将被忽略.概貌互换提示：这个域可能被忽略.groundColorgroundColor accessType inputOutput, type MFColor CDATA #IMPLIED地面半球上不同角度的颜色.弧度角0.0时为第一个值，描述 了天底（低头）的颜色.警告：groundColor值必须比groundAngle值多一个.|概貌互换提示：这个域可能被忽略.groundAnglegroundAngle accessType inputOutput, type MFFloat CDATA #IMPLIED0.pi/2弧度角度从0.0 （天底）增加到n/2=1.57 （水平）.警告：groundColor值必须比groundAngle值多一个.警告：groundAngle=0时的色彩值将被忽略.概貌互换提示：这个域可能被忽略.frontUrlfrontUrl accessType inputOutput, type MFString CDATA #IMPLIED场景中天空地面背景使用的全景图.提示：字符串可以是多值，用引号分割每个字符串"http:/www.url1.org" "http:/www.url2.org" 其它网 址.提示："的XML编码是"（字符实体）.警告：http链接要严格匹配目录和文件名的兼容性！提示：url中的每个空格符用%20替换掉.概貌互换提示：这个域可能被忽略.backUrlbackUrl accessType inputOutput, type MFString CDATA #IMPLIED场景中天空地面背景使用的全景图.提示：字符串可以是多值，用引号分割每个字符串"http:/www.url1.org" "http:/www.url2.org""其它网址.".提示："的XML编码是"（字符实体）.警告：http链接要严格匹配目录和文件名的兼容性！提示：url中的每个空格符用%20替换掉.概貌互换提示：这个域可能被忽略.leftUrlleftUrl accessType inputOutput, type MFString CDATA #IMPLIED场景中天空地面背景使用的全景图.提示：字符串可以是多值，用引号分割每个字符串"http:/www.url1.org" "http:/www.url2.org""其它网址.".提示："的XML编码是"（字符实体）.警告：http链接要严格匹配目录和文件名的兼容性！提示：url中的每个空格符用%20替换掉.概貌互换提示：这个域可能被忽略.rightUrlrightUrl accessType inputOutput, type MFString CDATA #IMPLIED场景中天空地面背景使用的全景图.提示：字符串可以是多值，用引号分割每个字符串"http:/www.url1.org" "http:/www.url2.org""其它网址.".提示：的XML编码是"（字符实体）.警告：http链接要严格匹配目录和文件名的兼容性！提示：url中的每个空格符用%20替换掉.概貌互换提示：这个域可能被忽略.topUrltopUrl accessType inputOutput, type MFString CDATA #IMPLIED场景中天空地面背景使用的全景图.提示：字符串可以是多值，用引号分割每个字符串"http:/www.url1.org" "http:/www.url2.org" 其它网 址.提示："的XML编码是"（字符实体）.警告：http链接要严格匹配目录和文件名的兼容性！提示：url中的每个空格符用%20替换掉.概貌互换提示：这个域可能被忽略.bottomUrlbottomUrl accessType inputOutput, type MFString CDATA #IMPLIED场景中天空地面背景使用的全景图.提示：字符串可以是多值，用引号分割每个字符串"http:/www.url1.org" "http:/www.url2.org""其它网址.".提示："的XML编码是"（字符实体）.警告：http链接要严格匹配目录和文件名的兼容性！提示：url中的每个空格符用%20替换掉.概貌互换提示：这个域可能被忽略.i)在butterflyx3d文件中添加雾化代码<Fog fogType='EXPONETIAL' visibilityRange='60'/>位置：背景天空后Fog节点通过混合远处的物体的颜色和雾的颜色来模拟大气效果.Background, Fog,Navigationinfo, TextureBackground, 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更加现实但要花费更多的资源计算.visibilityRangevisibilityRange accessType inputOutput, type SFFloat CDATA "0.0"设置在多远的距离外物体完全消失在雾中，使用局部坐标系 统并以米为单位.提示：visibilityRange 0 将禁止 Fog.j）在butterfly.x3d文件中添加文字,加 上自己的学号姓名Text是一个几何节点用以显示文字，可以包含FontStyle节点以设置字体.提示：在增加geometry或Appearance节点之前先插入一个Shape节点.在浏览器处理此 场景内容时，可以用符合类型定义的原型ProtoInstance来替代.stringstring accessType inputOutput, type MFString CDATA #IMPLIED.提示：字符串可以是多值，用引号分割每个字符串提示：字符串包含引号中套用的引号时，在内层的引号前加反斜杠例 子："say hello please"提示：如果需要，许多XML工具自动替换涉及的XML字符（像&替换为 &或"替换为"）.lengthlength accessType inputOutput, type MFFloat CDATA #IMPLIED 每个字符串变量的长度值的数组，参照局部坐标系统.每个字符串将 被伸展或压缩.<Transform translation="5 2 0"><Shape><Text length="3 3" string'学号""姓名"'><FontStyle style='"BOLD" "ITALIC"'/></Text></Shape></Transform>位置：置于雾节点之后k）在butterflyx3d文件中视点设置Viewpoint 节点Viewpoint指定用户视点在场景中的位置和方向Background, Fog, Navigationinfo,TextureBackground, Viewpoint 节点都是可绑定节点.DEFDEF ID #IMPLIEDDEF给这个节点定义了唯一的ID,这样在其它节点里就可以引用 这个节点.提示：为DEF命名时，使用有意义的描述性的名称可以帮助规范 文件，以提高文件可读性.descriptiondescription accessType initializeOnly, type SFString CDATA #IMPLIED为这个视点显示的文字描述或导航提示.提示：使用空格，使描述更清晰易读.警告：没有description值的视点将不显示在浏览器的视点菜单 里.提示：如果需要，许多XML工具自动替换涉及的XML字符（像& 替换为&或"替换为"）.概貌互换提示：这个域可能被忽略positionposition accessType inputOutput, type SFVec3f CDATA "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）在butterflyx3d文件中背景音乐播放添加音乐节点，<Sound>vAudioClip loop='true' url='"1wav"'/></Sound>位置：可放在背景或雾化之后Sound包含了一个AudioClip或MovieTexture节点以进行声音回放 在浏览器处理此场景 内容时，可以用符合类型定义的原型Protoinstance来替代.AudioClip提供音频数据给vSound>节点.提示：先添加Sound节点DEFDEF ID #IMPLIEDDEF给这个节点定义了唯一的ID,这样在其它节点里就可以引用 这个节点.提示：为DEF命名时，使用有意义的描述性的名称可以帮助规范 文件，以提高文件可读性.descriptiondescription accessType inputOutput, type SFString CDATA #IMPLIED此节点显小的提小文本.提示：如果需要，许多XML工具自动替换涉及的XML字符（像& 替换为&或替换为"）.urlurl accessType inputOutput, type MFString CDATA #IMPLIED声音文件的位置.必须支持.wav格式，推荐支持.midi格式， 其它格式可选.提示：字符串可以是多值，用引号分割每个字符串"http:/www.url1.org" "http:/www.url2.org" 其它网址.提示："的XML编码是"（字符实体）.警告：http链接要严格匹配目录和文件名的兼容性！提示：url中的每个空格符用%20替换掉.looploop accessType inputOutput, type SFBool （true|false） "false"当loop=true时循环，当loop=false只运行一次.m）在butterflyx3d文件中调用butterfly 1x3d文件添加一个变换框架，并给这个变换节点起个名称<Transform DEF="hello" scale="1 1 1" translation="0 0 0"><Inline url="butterfly3.x3d”/></Transform>位置可放在文字节点之后n）添加整只蝴蝶在空间移动的代码设置时间触发器，添加位置插值器，添加时间和位置插值器关联路由器<TimeSensor DEF='TIME2' cycleInterval='2' loop='true'/><PositionInterpolator DEF='INPO5' key='0 0.25 0.5 0.75 1' keyValue='0 0 0 4 0 0 5 2 1 1.2 2 0 -3 1 1 '/><ROUTE fromField='fraction_changed' fromNode='TIME2' toField='set_fraction' toNode='INPO5'/>在 </Transform>代码后添加插值器到几何节点vROUTE fromField='value_changed' fromNode='INPO5' toField='translation' toNode='hello'/>o）修改代码在场景中添加（35个）蝴蝶群飞舞的例子要求每个蝴蝶的动作不一样四、实验素材1、X3D_圆柱体旋转动画源代码stick.x3d2、X3D _小球平移动画源代码ball.x3d3、X3D _蝴蝶源代码4、实验所用贴图五、参考1、X3DTooltips, X3D中文帮助文档。2、教材：虚拟现实制作与开发，刘正东等编，清华大学出版社，2012年7月
