380 likes | 565 Views
X3D 教程. 掌握 X3D 第六节. 主要内容:交互. 掌握 X3D 第六节. LOD 细节级别. LOD 此节点会根据视点到物体的距离做出不同的事件,例如根据不同的距离显示不同的图形。 range 层次范围. 视点. range. 掌握 X3D 第六节. <LOD range="15"> <Shape> <Box/> </Shape> <Shape> <Text string="hello"/> </Shape> </LOD>. 视点.
E N D
掌握X3D 第六节 主要内容:交互
掌握X3D 第六节 LOD细节级别 • LOD此节点会根据视点到物体的距离做出不同的事件,例如根据不同的距离显示不同的图形。 • range 层次范围 视点 range
掌握X3D 第六节 • <LOD range="15"> • <Shape> • <Box/> • </Shape> • <Shape> • <Text string="hello"/> • </Shape> • </LOD> 视点 Range 15
掌握X3D 第六节 • <LOD range="15 30"> • <Shape> • <Box/> • </Shape> • <Shape> • <Text string="hello"/> • </Shape> • <Shape> • <Cone /> • </Shape> • </LOD>
掌握X3D 第六节 Collision碰撞 • Collision当视点与物体发生碰撞时发生事件 • collideTime 发生碰撞的时间事件 视点
掌握X3D 第六节 • <Collision DEF='C' enabled='true'> • <Transform DEF='Mover' translation='0 1 0'> • <Shape> • <Appearance> • <ImageTexture url="2.jpg" /> • </Appearance> • <Sphere radius='0.2'/> • </Shape> • </Transform> • </Collision>
掌握X3D 第六节 • <TimeSensor DEF='Clock' cycleInterval='8' /> • 使起初不会转? • 记得以前的TimeSensor? • <TimeSensor DEF='Clock' cycleInterval='8' loop='true' /> • 通过set_startTime启动TimeSensor
掌握X3D 第六节 • <OrientationInterpolator DEF='Or' key='0, 0.5, 1' keyValue='0 1 0 0.0, 0 1 0 3.14, 0 1 0 6.28'/>
掌握X3D 第六节 • <ROUTE fromNode='C' fromField='collideTime' toNode='Clock' toField='set_startTime'/> • <ROUTE fromNode='Clock' fromField='fraction_changed' toNode='Or' toField='set_fraction'/> • <ROUTE fromNode='Or' fromField='value_changed' toNode='Mover' toField='set_rotation'/>
掌握X3D 第六节 Anchor超链接 • description 描述 • url 地址
掌握X3D 第六节 链接到网页 • <Anchor description="baidu.com" url="http://www.baidu.com"> • <Shape> • <Text string="baidu"/> • </Shape> • </Anchor> • 保存为1.X3D
掌握X3D 第六节 链接到X3D文件 • <Anchor url="1.x3d"> • <Shape> • <Appearance> • <Material diffuseColor="1 0 0" emissiveColor="0 1 0" specularColor="0 0 1"/> • </Appearance> • <Box size="1 1 1"/> • </Shape> • </Anchor>
掌握X3D 第六节 Touch接触 • TouchSensor接触感应 • isActive 鼠标按下时为true • isOver 鼠标划过时发生事件 • touchTime鼠标按下时发生时间事件
掌握X3D 第六节 交互流程 ROUTE ROUTE TouchSensor Script text
掌握X3D 第六节 改变文字 • <Shape> • <Text DEF="text" string="hello"/> • </Shape> • <TouchSensor DEF="touchSensor"/>
掌握X3D 第六节 • <Script DEF="Script"> • <field name="set_active" type="SFBool" accessType="inputOnly" /> • <field name="string_changed" type="MFString" accessType="outputOnly" /> • <![CDATA[javascript: • function set_active() • { • string_changed = "touch"; • }]]> • </Script>
掌握X3D 第六节 • <ROUTE fromNode="touchSensor" fromField="isActive" toNode="Script" toField="set_active" /> • <ROUTE fromNode="Script" fromField="string_changed" toNode="text" toField="string" />
掌握X3D 第六节 • 划过便触发 • <ROUTE fromNode="touchSensor" fromField="isOver" toNode="Script" toField="set_active" /> • <ROUTE fromNode="Script" fromField="string_changed" toNode="text" toField="string" />
掌握X3D 第六节 左右移动 • 按钮 TouchSensor放在中间表示只对某个物体有效 • <Transform translation="-2 -2 0"> • <TouchSensor DEF="touchSensor1"/> • <Shape> • <Text string="Left"/> • </Shape> • </Transform> • <Transform translation="2 -2 0"> • <TouchSensor DEF="touchSensor2"/> • <Shape> • <Text string="Right"/> • </Shape> • </Transform>
掌握X3D 第六节 • 移动体 • <Transform DEF="M" > • <Shape> • <Appearance> • <ImageTexture url="2.jpg"/> • </Appearance> • <Box/> • </Shape> • </Transform>
掌握X3D 第六节 • <Script DEF="Script"> • <field name="set_fraction1" type="SFBool" accessType="inputOnly" /> • <field name="set_fraction2" type="SFBool" accessType="inputOnly" /> • <field name="value_changed" type="SFVec3f" accessType="outputOnly" />
掌握X3D 第六节 • <![CDATA[javascript: • function set_fraction1() • { • value_changed[0]-=0.2; • } • function set_fraction2() • { • value_changed[0]+=0.2; • } • ]]> • </Script>
掌握X3D 第六节 • <ROUTE fromNode="touchSensor1" fromField="isActive" toNode="Script" toField="set_fraction1" /> • <ROUTE fromNode="touchSensor2" fromField="isActive" toNode="Script" toField="set_fraction2" /> • <ROUTE fromNode="Script" fromField="value_changed" toNode="M" toField="translation" />
掌握X3D 第六节 陨石游戏 • 点击发生变化 • <Transform DEF="transform"> • <Shape> • <Appearance> • <ImageTexture url="3.jpg" /> • </Appearance> • <Sphere radius="1" /> • </Shape> • </Transform> • <TouchSensor DEF="touchSensor"/>
掌握X3D 第六节 • <Script DEF="Script"> • <field name="set_fraction" type="SFBool" accessType="inputOnly" /> • <field name="value_changed" type="SFVec3f" accessType="outputOnly" /> • <![CDATA[javascript: • function set_fraction() • { • value_changed[2] -= 10; • }]]> • </Script>
掌握X3D 第六节 • <ROUTE fromNode="touchSensor" fromField="isActive" toNode="Script" toField="set_fraction" /> • <ROUTE fromNode="Script" fromField="value_changed" toNode="transform" toField="translation" /> ROUTE ROUTE
掌握X3D 第六节 计分 • <Transform translation="-2 2 0"> • <Shape> • <Text DEF="text"/> • </Shape> • </Transform> • <TimeSensor DEF="Clock" cycleInterval="4" loop="true"/>
掌握X3D 第六节 添加成员 • <Script DEF="Script"> • <field name="set_fraction" type="SFBool" accessType="inputOnly" /> • <field name='set_fraction2' type='SFFloat' accessType='inputOnly'/> • <field name="value_changed" type="SFVec3f" accessType="outputOnly" /> • <field name="string_changed" type="MFString" accessType="outputOnly" value="scores:0"/> • <field name="scores" type="SFInt32" accessType="outputOnly" value="0"/>
掌握X3D 第六节 • function set_fraction() • { • value_changed[2] -= 10; • scores+=10; • }
掌握X3D 第六节 • function set_fraction2() • { • string_changed="scores:"+scores; • }
掌握X3D 第六节 • <ROUTE fromNode="Clock" fromField="fraction_changed" toNode="Script" toField="set_fraction2" /> • <ROUTE fromNode="Script" fromField="string_changed" toNode="text" toField="string" /> ROUTE ROUTE
掌握X3D 第六节 陨石会移动 • 时间 • <TimeSensor DEF="Clock2" cycleInterval="4" loop="true"/> • 成员 • <field name='set_fraction3' type='SFFloat' accessType='inputOnly'/> • <field name="t" type="SFFloat" accessType="outputOnly" />
掌握X3D 第六节 • 圆周运动 • function set_fraction3() { • t+=0.1; • value_changed[0] =2*Math.sin(t); • value_changed[1] =2*Math.cos(t); • } • 传递 • <ROUTE fromNode="Clock2" fromField="fraction_changed" toNode="Script" toField="set_fraction3" />
掌握X3D 第六节 点文字也可以?移动位置 • <Transform DEF="transform"> • <TouchSensor DEF="touchSensor"/> • <Shape> • <Appearance> • <ImageTexture url="3.jpg" /> • </Appearance> • <Sphere radius="1" /> • </Shape> • </Transform>
掌握X3D 第六节 • 改进:多个球,复杂的移动路径