昨天看到一篇学习开飞机的文章，然后就想，要是能开飞机就好了。每个人都想在年轻时成为一名飞行员！做中国飞行员太难了，开飞机也不容易！后来想，如果能用HT开飞机，那该多有趣啊。哈哈，这个实现的效果还是很不错的。它可以让你满足开飞机的虚荣心，开怀大笑。Demo地址：http://hightopo.com/guide/gui...看具体实现效果：这个例子基本上完全模拟了飞机的飞行模式，包括起飞跑道，包括飞机的运动轨迹，螺旋桨旋转，飞行器尾部指示灯亮起。首先，最重要的就是我们的航模。前面文章提到，HT内部封装了一个方法ht.Default.loadObj来加载OBJ文件：ht.Default.loadObj('obj/plane.obj','obj/plane.mtl',{center:true,r3:[0,-Math.PI/2,0],//使平面面向右s3:[0.15,0.15,0.15],//使平面变小finishFunc:function(modelMap,array,rawS3){if(modelMap){modelMap.propeller.r3={//propellerpropellerfunc:function(data){return[data.a('angle'),0,0];}};//让螺旋桨变大modelMap.propeller.s3=[1,1.2,1.2];modelMap.propeller.color='黄色';}});这里的modelMap.propeller是OBJ文件中定义的modelMap对象，在propeller对象中，可以尝试打印modelMap看看输出结果。该方法中的finishFunc(modelMap,array,rawS3)用于加载后的回调处理。详情请参考HTforWebOBJ手册。我们还在飞机尾部添加了一个OBJ模型中没有的“红色闪烁指示灯”。这里用到的是组合模型数组（一个由所有材质组成的数组，里面至少有一个模型），我们在数组中添加一个新的球模型：//添加一个球体模型作为指示灯指示灯数组.push({shape3d:ht.Default.createSmoothSphereModel(),t3:[-40,10,0],s3:[6,6,6],color:{func:function(data){返回数据.a('浅色')?'红色':'黑色';}}});这里的shape3d是HT封装的属性名，通过setShape3dModel(name,model)函数注册或者getShape3dModel(name)函数返回注册的3D模型，如何注册3D模型可以参考HTforWebModelingManual。颜色属性名称对应一个对象。这里的定义如下。Color直接通过data.getAttr('a')获取data.setAttr('a',value)中的值。这有两个优点。一是普通属性操作，不能污染HT，所以HT专门定义了这个attr属性类型，HT保留给用户存储业务数据；其次，这对于数据绑定也很方便，我们可以通过调用setAttr方法来改变属性，非常方便。然后我们使用ht.Default.setShape3dModel(name,model)将我们刚刚组合的模型数组注册为我们想要的“平面”模型：ht.Default.setShape3dModel('plane',array);注册完模型后，确认要调用这个模型，我们可以通过shape3d属性来调用这个模型，在这个模型中自定义上面代码中出现的light属性和angle属性：plane=newht.Node();plane。s3(200,200,200);plane.s3(rawS3);plane.s({'shape3d':'plane','shape3d.scaleable':false,'wf.visible':true,//是否线框isvisible'wf.color':'white','wf.short':true//是否显示闭合线框，true为未闭合短线框});plane.a({'angle':0,'light'：错误的}）;因为飞机还有螺旋桨和指示灯两个功能，所以我们要给这两个模型做动画。可以参考HTforWeb动画手册，通过用户在表单上选择的结果来确定飞机的飞行时间和持续时间。看飞行器的视角，飞行器沿“航线”的旋转角度，机尾指示灯的“闪烁”功能等。最后别忘了，当飞行器停止飞行时，如果你想让飞机继续飞行，就要回调这个动画，并设置灯停止闪烁，别忘了启动动画：params={delay:1500,duration:20000,easing:function(t){返回(t*=2)<1?0.5*t*t:0.5*(1-(--t)*(t-2));},动作:function(v,t){varlength=g3d.getLineLength(polyline),offset=g3d.getLineOffset(polyline,length*v),point=offset.point,px=point.x,py=point.y,pz=point.z,tangent=offset.tangent,tx=tangent.x,ty=tangent.y,tz=tangent.z;plane.p3(px,py,pz);plane.lookAt([px+tx,py+ty,pz+tz],'右');varcamera=formPane.v('相机');if(camera==='LookAt'){g3d.setCenter(px,py,pz);}elseif(camera==='第一人称'){g3d.setEye(px-tx*400,py-ty*400+30,pz-tz*400);g3d.setCenter(px,py,pz);}plane.a('角度',v*Math.PI*120);if(this.duration*t%1000>500){plane.a('light',false);}else{plane.a('light',true);}},finishFunc:function(){animation=ht.Default.startAnim(params);plane.a('light',false);}};animation=ht.Default.startAnim(参数);其实最让我们好奇的是，描绘的路径与飞机本身的飞行无关，有那么多左转右转，怎么办？接下来，让我们绘制路径。首先根据ht.Polyline绘制路径：polyline=newht.Polyline();折线.setThickness(2);polyline.s({'shape.border.pattern':[16,16],'shape.border.color':'red','shape.border.gradient.color':'yellow','shape3d.resolution':300,'3d.selectable':false});dataModel.add（折线）；上面的代码只是给datamodel数据模型添加了一个polyline管道，并不会显示任何东西。要显示“频道”，首先要设置频道所在的点。我们首先设置通道的初始点：points=[{x:0,y:0,e:0}];段=[1];点和线段在HTforWebShape手册中定义，点是ht.List类型数组的定点信息，顶点是{x:100,y:200}格式的对象；segments为ht.List类型的线段数组信息，代表points数组中顶点按照数组顺序的连接方式图中“通道”左侧的多个圆形轨道也是通过设置点和线段来设置的：for(vark=0;k
