420 likes | 537 Views
X3D 教程. 掌握 X3D 第七节. 主要内容:交互. 掌握 X3D 第七节. StringSensor. StringSensor 感应键盘上打出的字符 enabled 设置是否有效 enteredText 按下键盘输入文字时发生事件 finalText 字符串输入完成后发生事件. 掌握 X3D 第七节. 输入文字. <Shape> <Text DEF="text" string="hello"/> </Shape>
E N D
掌握X3D 第七节 主要内容:交互
掌握X3D 第七节 StringSensor • StringSensor感应键盘上打出的字符 • enabled 设置是否有效 • enteredText 按下键盘输入文字时发生事件 • finalText 字符串输入完成后发生事件
掌握X3D 第七节 输入文字 • <Shape> • <Text DEF="text" string="hello"/> • </Shape> • <StringSensor DEF="stringSensor"/>
掌握X3D 第七节 • <Script DEF="Script"> • <field accessType="inputOnly" name="set_input" type="SFString"/> • <field accessType="outputOnly" name="string_changed" type="MFString"/> • <![CDATA[javascript: • function set_input(value) • { • string_changed = value; • }]]> • </Script>
掌握X3D 第七节 • <ROUTE fromNode="stringSensor" fromField="enteredText" toNode="Script" toField="set_input" /> • <ROUTE fromNode="Script" fromField="string_changed" toNode="text" toField="string"/>
掌握X3D 第七节 • 取字符串最后一位 • string_changed=value.substring(value.length-1,value.length); • Substring(起始位置,结束位置) 截取字符串的某部分
掌握X3D 第七节 控制人物 • 地面 • <Shape> • <Appearance> • <ImageTexture url="pic.jpg"/> • </Appearance> • <Box size="6 0.1 8"/> • </Shape> • 人物 • <Transform DEF="role" translation ="0 1.8 0"> • <Inline url="avatar.wrl"/> • </Transform>
掌握X3D 第七节 • <StringSensor DEF="stringSensor"/> • <Script DEF="Script"> • <field accessType="inputOnly" name="set_input" type="SFString"/> • <field accessType="outputOnly" name="value_changed" type="SFVec3f" value="0 1.8 0"/> • <![CDATA[javascript: • function set_input(value) • { • value=value.substring(value.length-1,value.length); • if(value=="w") • value_changed[2]+=0.1; • }]]> • </Script>
掌握X3D 第七节 • <ROUTE fromNode="stringSensor" fromField="enteredText" toNode="Script" toField="set_input" /> • <ROUTE fromNode="Script" fromField="value_changed" toNode="role" toField="translation" />
掌握X3D 第七节 • function set_input(value) • { • value=value.substring(value.length-1,value.length); • if(value=="w") • value_changed[2]+=0.1; • if(value=="s") • value_changed[2]-=0.1; • if(value=="a") • value_changed[0]-=0.1; • if(value=="d") • value_changed[0]+=0.1; • }]]> • Value为传参
掌握X3D 第七节 PlaneSensor • PlaneSensor • 让物体可以随着鼠标的拖拽在平面上移动 • enabled 设置是否有效 • isActive 当按下鼠标时为true • translation_changed 触发事件
掌握X3D 第七节 • <X3D> • <Scene> • <Transform DEF="transform"> • <Shape> • <Box/> • </Shape> • <PlaneSensor DEF="planeSensor"/> • </Transform> • <ROUTE fromNode="planeSensor" fromField="translation_changed" toNode="transform" toField="translation" /> • </Scene> • </X3D>
掌握X3D 第七节 例子:中国象棋 • 棋盘 • <Shape> • <Appearance> • <ImageTexture url="zgxq.jpg"/> • </Appearance> • <Box size="6 8 0.1"/> • </Shape>
掌握X3D 第七节 • 棋子 • <Transform DEF="transform" rotation=" 1 0 0 1.57" translation ="0 0 0.15"> • <Shape> • <Appearance> • <Material/> • <ImageTexture DEF="qz" url="zgxq2.jpg"/> • </Appearance> • <Cylinder height="0.2" radius="0.3"/> • </Shape> • </Transform>
掌握X3D 第七节 • 感应器 • <Transform DEF="transform" rotation=" 1 0 0 1.57" translation ="0 0 0.15"> • <PlaneSensor DEF="planeSensor"/> • <Shape> • <Appearance> • <Material/> • <ImageTexture DEF="qz" url="zgxq2.jpg"/> • </Appearance> • <Cylinder height="0.2" radius="0.3"/> • </Shape> • </Transform>
掌握X3D 第七节 • 传递 • <ROUTE fromNode="planeSensor" fromField="translation_changed" toNode="transform" toField="translation" />
掌握X3D 第七节 • 无法准确控制? • 两个Transform,一个用于调整角度和位置,另一个用于感应器的事件 • <Transform DEF="transform" > • <PlaneSensor DEF="planeSensor"/> • <TouchSensor DEF="touchSensor"/> • <Transform rotation=" 1 0 0 1.57" translation ="0 0 0.15"> • <Shape> • <Appearance> • <Material/> • <ImageTexture DEF="qz" url="zgxq2.jpg"/> • </Appearance> • <Cylinder height="0.2" radius="0.3"/> • </Shape> • </Transform> • </Transform>
掌握X3D 第七节 • 点击有变化 • <Script DEF="Script"> • <field name="set_fraction" type="SFBool" accessType="inputOnly" /> • <field name="value_changed" type="MFString" accessType="outputOnly" /> • <![CDATA[javascript: • function set_fraction(value) • { • if(value==true) • value_changed="zgxq3.jpg"; • else • value_changed="zgxq2.jpg"; • } • ]]> • </Script>
掌握X3D 第七节 • <ROUTE fromNode="touchSensor" fromField="isActive" toNode="Script" toField="set_fraction" /> • <ROUTE fromNode="Script" fromField="value_changed" toNode="qz" toField="url" />
掌握X3D 第七节 SphereSensor • SphereSensor使物体能根据鼠标的拖拽旋转 • enabled 设置是否有效 • isActive当按下鼠标时为true • rotation_changed 触发事件
掌握X3D 第七节 • <Transform translation="0 1 -2"> • <Shape> • <Box/> • </Shape> • </Transform> • <Transform DEF="transform"> • <Shape> • <Appearance> • <ImageTexture url="2.jpg" /> • </Appearance> • <Sphere /> • </Shape> • <SphereSensor DEF="sphereSensor"/> • </Transform> • <ROUTE fromNode="sphereSensor" fromField="rotation_changed" toNode="transform" toField="rotation"/>
掌握X3D 第七节 综合例子 乒乓球游戏
掌握X3D 第七节 • 我方球拍 • <Transform DEF="role" translation="4 0 0"> • <Shape> • <Appearance> • <Material diffuseColor="0.3 0.3 0.7" /> • </Appearance> • <Box size="0.3 1 0.3"/> • </Shape> • </Transform>
掌握X3D 第七节 • 电脑球拍 • <Transform DEF="combuter" translation="-4 0 0"> • <Shape> • <Appearance> • <Material diffuseColor="0.3 0.3 0.7" /> • </Appearance> • <Box size="0.3 1 0.3"/> • </Shape> • </Transform>
掌握X3D 第七节 • 小球 • <Transform DEF="ball" translation="0 0 0"> • <Shape> • <Appearance> • <Material diffuseColor="0.7 0.7 0.2" /> • </Appearance> • <Sphere radius="0.2"/> • </Shape> • </Transform>
掌握X3D 第七节 • 键盘控制事件 • <StringSensor DEF="stringSensor"/> • <Script DEF="Script"> • <field name="set_input" type="SFString" accessType="inputOnly" /> • <field name="value_changed" type="SFVec3f" accessType="outputOnly" value="4 0 0"/>
掌握X3D 第七节 • <![CDATA[javascript: • function set_input(value) • { • value=value.substring(value.length-1,value.length); • if(value=="w") • value_changed[1]+=0.3; • if(value=="s") • value_changed[1]-=0.3; • }]]> • </Script>
掌握X3D 第七节 • <ROUTE fromNode="stringSensor" fromField="enteredText" toNode="Script" toField="set_input" /> • <ROUTE fromNode="Script" fromField="value_changed" toNode="role" toField="translation" />
掌握X3D 第七节 • 小球移动 • <TimeSensor DEF="Clock" cycleInterval="4" loop="true"/> • <field name="set_fraction" type="SFFloat" accessType="inputOnly"/> • <field name="v" type="SFFloat" accessType="outputOnly" value="0.1"/> • <field name="t" type="SFFloat" accessType="outputOnly" value="0.1"/> • <field name="value_changed2" type="SFVec3f" accessType="outputOnly"/>
掌握X3D 第七节 • function set_fraction() { • t+=0.1; • value_changed2[0] +=v; • value_changed2[1] =2*Math.cos(t); • }
掌握X3D 第七节 • function set_fraction() { • t+=0.1; • value_changed2[0] +=v; • value_changed2[1] =2*Math.cos(t); • if(value_changed2[0]>value_changed[0] • &&value_changed2[1]<value_changed[1]+0.5 • &&value_changed2[1]>value_changed[1]-0.5 • &&value_changed2[0]<value_changed[0]+0.2) • v=-v; • }
掌握X3D 第七节 • <ROUTE fromNode="Clock" fromField="fraction_changed" toNode="Script" toField="set_fraction" /> • <ROUTE fromNode="Script" fromField="value_changed2" toNode="ball" toField="translation" />
掌握X3D 第七节 • 电脑控制 • <field name="value_changed3" type="SFVec3f" accessType="outputOnly" value="-4 0 0"/>
掌握X3D 第七节 • function set_fraction() { • t+=0.1; • value_changed2[0] +=v; • value_changed2[1] =2*Math.cos(t); • if(value_changed2[0]>value_changed[0]&&value_changed2[1]<value_changed[1]+0.5&&value_changed2[1]>value_changed[1]-0.5&&value_changed2[0]<value_changed[0]+0.2) • v=-v; • value_changed3[1]=value_changed2[1]; • if(value_changed2[0]<value_changed3[0] • &&value_changed2[1]<value_changed3[1]+0.5 • &&value_changed2[1]>value_changed3[1]-0.5 • &&value_changed2[0]>value_changed3[0]-0.2) • v=-v; • }
掌握X3D 第七节 • <ROUTE fromNode="Script" fromField="value_changed3" toNode="combuter" toField="translation" />
掌握X3D 第七节 • 显示输赢 • <Shape> • <Text DEF="text"/> • </Shape> • <field name="string_changed" type="MFString" accessType="outputOnly"/>
掌握X3D 第七节 • function set_fraction() { • t+=0.1; • value_changed2[0] +=v; • value_changed2[1] =2*Math.cos(t); • if(value_changed2[0]>value_changed[0]&&value_changed2[1]<value_changed[1]+0.5&&value_changed2[1]>value_changed[1]-0.5&&value_changed2[0]<value_changed[0]+0.2) • v=-v; • value_changed3[1]=value_changed2[1]; • if(value_changed2[0]<value_changed3[0]&&value_changed2[1]<value_changed3[1]+0.5&&value_changed2[1]>value_changed3[1]-0.5&&value_changed2[0]>value_changed3[0]-0.2) • v=-v; • if(value_changed2[0]>value_changed[0]+1) string_changed="computer_win"; • if(value_changed2[0]<value_changed3[0]-1) string_changed="role_win"; • }
掌握X3D 第七节 • <ROUTE fromNode="Script" fromField="string_changed" toNode="text" toField="string" />