掌握X3D

Download Report

Transcript 掌握X3D 

X3D教程
掌握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
感应
TouchSensor
ROUTE
Script
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
Script
物体
掌握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
Script
Text
掌握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 第六节
• 改进:多个球，复杂的移动路径