这是公司师傅写的例子，放在官网供大家学习。一开始我真的不知道它在做什么。我只是组合了三个形状基元，然后您可以同时旋转、放大和缩小三个图形。点击“动画”可以让中间的图形元素单独围绕某个点旋转。窗体最上面的那个“Axis”还真不知道是干什么用的。我用过，但是觉得比较麻烦，而且官网是demo，没有说明。..所以我今天的任务就是彻底剖析这个例子！!本文中的例子：http://www.hightopo.cn/demo/3drotate/3d-rotate.html首先我们来看这个案例：看看如何操作这个3D交互模型，可以直接滑动“旋转”滑动条，你会看到左下角的3d和2d图元会旋转，然后点击“Axis”中的任意值，再点击“Animate”，你会看到中间的图元会旋转滑动同时“范围”滑块控制你的旋转范围。调为“0”则不旋转，调为“30”则旋转30度，以此类推。然后调整“Reset”，你会发现界面不是完全刷新，而是两边的圆柱体局部刷新，根据这两个圆柱体和中间节点的关联进行重置。左下角是整个3D场景的俯视图，这样我们可以很直观的看到图元的运动方向和位置。你可能想知道这个顶视图是如何放置的？如果3D中的图元发生变化，那么俯视图中的图元是否也会发生变化？怎么把form表单放在右上角，view放在左下角？如何仅移动3d两个以在此处修复这两个？或者你还有其他问题，我会尽量在这里回答清楚，如果你找不到答案，你可以去我们官网HTforWeb寻找你的问题。嗯，基础是先把3D场景布置好。HT提供方法非常细致。通常，我们生成网格可能需要一段时间，这是基本代码。新手开发者可以快速上手~几行代码就可以创建一个3D场景，简直太快了。..dm=newht.DataModel();g3d=newht.graph3d.Graph3dView(dm);g3d.setGridVisible(true);//设置网格可见性g3d.setGridSize(m);//设置网格大小g3d.setGridGap(w);//设置网格间距g3d.setEye([-200,150,200]);//设置相机位置g3d.getView().className='main';document.body.appendChild(g3d.getView());由于HT默认为所有组件都设置了样式“position:absolute”，所以我们在初始化这个组件的时候，就要在style中写上position，并且把这个组件添加到你要添加的标签中，在这个例子中，formform,2dcomponent和3dcomponent没有相互依附，所以我们可以直接将这三个添加到body中。另外值得注意的是，所有HT组件的最根层是一个通过组件的getView()函数获取的div。所以如果我们要添加HTML标签，就必须是HTML标签。然后把form表单放在界面的右上角，放在右上角直接在style里设置“top”，“bottom”，“left”，“right”。二维图片也是如此：formPane=newht.widget.FormPane();formPane.setLabelAlign('right');formPane.getView().className='formpane';document.body.appendChild(formPane.getView());formPane.addRow(['Rotation:',{id:'rotation',slider:{min:-180,max:180,value:0,step:1,onValueChanged:function(e){node.setRotation(this.getValue()*Math.PI/180);}}}],[60,0.1]);因为本例中的form表单中的行和内容较多，所以这里只以form表单中的自定义行为例。这里的“id”只是为了快速找到这个元素。Slider是HTform表单的自定义方法，滑块函数。设置该属性后，HT会根据属性值自动构建ht.widger.Slider对象。具体参数可以参考HTforWebform手册。至于左下角的2D顶视图，这是通过共享与3D相同的datamodel数据模型。只要我们画好图形，添加到datamodel中，不管是什么组件，只要调用了datamodel，就可以拥有datamodel中的数据。所有数据：g2d=newht.graph.GraphView(dm);g2d.getView().className='g2d';g2d.setEditable(true);document.body.appendChild(g2d.getView());ht.Default.callLater(g2d.fitContent,g2d,[true,50,true]);ht.Default.callLater(func,scope,args,delay)获取全局下一个数，其中func是指回调函数，scope是指Function字段，args为函数参数列表，delay为延迟时间（毫秒）。这个函数可以在页面打开的时候回调g2d.fitContent函数，然后作用域就只在g2d中了。该函数的参数列表是fitContent(anim,padding,notZoomIn)函数的参数。这三个参数分别代表“是否使用动画”、“缩放后的图元区域与拓扑边的距离”、“是否将最小缩放值限制为1”。然后在3d中添加图元，这里我不截取所有代码，只取一个特别有趣的图元，中间和外层的透明图元：shape=newht.Shape();shape.s({'all.reverse.cull':true,'all.color':'rgba(0,255,0,0.5)','all.transparent':true});shape.setThickness(2);dm.add(形状);varresetShape=function(){varcs=node.getCorners(10,10);cs.push(cs[0]);shape.setPoints(cs);g3d.setBoundaries(ht.Default.toBoundaries(cs));};resetShape();这里有一些比较有意思的地方：这里我们使用了node.getCorners()这个方法，这个是为了得到四个点，对于2d来说就是左上角，右上角，右下角，左下角四个点；对于3D，就是直接获取底面的“左上、右上、右下、左下”四个点。我花了很长时间才对此做出反应。..并以这四点为造型的要点。这里也用到了setBoundaries(boundaries)函数，ht.Default.toBoundaries函数用于将不符合setBoundaries函数参数的格式转换成自己需要的参数格式。虽然我不认为这条线在这个例子中有用，但它仍然教会了我很多关于碰撞测试的知识。我们经常需要在碰撞测试时设置g3d.setNear函数。实在不明白这个功能是干什么用的。结果，这个例子让我注意到，如果“我的”视线的近端段位置是setNear(1)，那么我能看到的就是距表面1的距离。此功能默认设置为10。即使我们不设置这个值，我们仍然可以在3D中看到图元的内部。我们刚才介绍了getCorners()函数，其实它还有两个参数xpadding和ypadding，分别代表“水平padding”和“垂直padding”，也就是说我们在得到四个角的同时，还可以设置四个角和两侧之间的填充。只要这个值设置得比setNear大，我们就看不到3d图元的内部。我们还注意到似乎是一行“废代码”：cs.push(cs[0])。这根本不是废代码，它帮助了很多！在HT中，用ht.Shape创建的图元，只要你不手动设置绘制关闭，它就会停留在你最后绘制的位置，所以我把最后一个点和第一个点连起来，那就是A闭graph，否则你会看到后面少了一部分，像这样：我在其他文章中也提到HT封装了一些非常方便的方法和事件，比如datamodel#md，用来监听数据属性的变化，这里我们使用md判断只有中间的节点才能绕一个点旋转的方法。详见HTforWeb数据模型手册：dm.md(function(e){if(e.data===node){if(e.property==='rotation'){formPane.v('旋转',180/Math.PI*e.newValue);}resetShape();}});这里我想说的是“rotate随点旋转”功能，这里我们没有使用我们自定义的anchor锚点，但是功能类似，通过在我的窗体上选中“left,right,front,back”来设置旋转中心点，HT中的表单表单简写为v(id)，通过getValue(id)根据id获取对应的item元素值：formPane.addRow([{button:{label:'Animate',onClicked:function(){vardx=0,dy\=0,range=formPane.v('range')*Math.PI/180;if(formPane.v('left')){dx=-node.getWidth()/2;}if(formPane.v('right')){dx=node.getWidth()/2;}if(formPane.v('back')){dy=-node.getHeight()/2;}如果(formPane.v('front')){dy=node.getHeight()/2;}动画（节点，范围，dx，dy）；}}},{button:{label:'Reset',onClicked:function(){node.setRotation(0);}}}],[0.1,0.1]);你还不明白吗？到我们的官网开始向新手学习吧！
