X3D制作简易三维动画

第一次接触X3D，想留下一些自己的学习想法。

首先，直接百度X3D，会发现除了官网文档，其他的资料很少，官网文档全英文，看完它提供的例子后，知道X3D是一个HTML5框架，可以直接在项目文件中引入X3D框架，然后在HTML文档中直接写<x3d></x3d>的标签，而<x3d>标签里面的内容就是三维的，我们可以随意用鼠标变换三维坐标轴，从而看到物体的各个面。

但官网内容散，我们不容易获取我们所需的知识，所以常常是看完官网后，想动手制作自己需要的三维模型还是一片茫然，所以本篇博客主要给大家提供一些学习X3D的网址：

1、关于X3D的简单学习：http://www.doc88.com/p-683756048202.html

                                       https://wenku.baidu.com/view/420495b2e53a580216fcfe48.html

上面两个文档都有对利用X3D制作三维网页的介绍，可以利用PointSet、IndexedLineSet、IndexedFaceSet制作自己想要的点、线、面，其中关于IndexedFaceSet制作多面体原理可以分享一下：

<IndexedFaceSet coordIndex="0,1,2,-1,0,1,3,-1,0,2,3,-1,1,2,3">

        <Coordinate point="0 0 0,1 0 0,0 1 0,0 0 1"/>

</IndexedFaceSet>

其中point指我们在三维坐标中按xyz顺序定的四个点，我们以0 1 2 3四个数按顺序标记我们的四个点，coordIndex则是利用标记将我们的点连接起来制作面，其中-1为截断点。所以上述代码最终得到的是一个四面体。制作多面体的过程中，我们要注意利用DEF（标记节点）、USE（利用被标记节点）、translation（三维平移）、rotation（旋转,包含四个参数，前三个参数代表旋转轴，第四个参数代表旋转角度，采用弧度）等节点属性充分对物体相同的部位进行复用，减少代码的冗余性。

2、上面两个学习文档只是教了如何制作三维网页，但是关于动画的行动还是讲述得不甚明了，但是通过分析别人写的例子之后，原理则一目乐然了，首先，关于X3D文件的说明，我们需要将html网页中的<Scene></Scene>间的内容（三维物体的静态模型）导入.x3d文件，然后再利用<Inline>节点将.x3d文件导入html文件中运用。.x3d文件采样xml文件的格式，所以节点首字母必须严格大写，其中涉及到的节点主要有：

a:        PositionInterpolator、OrientationInterpolator等，他们常用属性有三个：DEF、key、keyValue，其中DEF代表该实例节点，Key通常代表间隔（这里涉及了插值运动），keyValue代表了每一间隔出物体运动的变化（可能是位置、可能是旋转角度的变化）。

b:        TimeSensor代表运动时钟，即物体运动的时间设置，当其属性enabled的值为“false”时，物体会在你打开文件那一刻开始你指定的运动；当enabled的值设置为“true”时，我们 可以通过TouchSensor节点设置物体的触发式运动。

c:        <ROUTE fromField='touchTime' fromNode='PumpTouched' toField='set_triggerTime' toNode='TriggerStart'/>

          <ROUTE fromField='triggerTrue' fromNode='TriggerStart' toField='enabled' toNode='PistonClock'/>

            来指定物体的运动轨迹。

其中，.x3d文件可以通过BS-contact软件观看。