除了创建模型、为模型设置颜色和纹理外，构建3D场景还需要灯光效果来更真实地反映真实世界的场景。我觉得这个例子既漂亮又有代表性，就分享给大家。本实例地址：http://www.hightopo.com/guide...实例动画：上述场景中的主要知识点包括：3D光照和3D模型的流动。场景构建整个场景包括2D场景（也就是鹰眼部分）和3D场景：dm=newht.DataModel();g3d=newht.graph3d.Graph3dView(dm);g3d.setGridVisible(true);//指定是否显示网格g3d.setGridColor('#74AADA');//指定网格线颜色g3d.getView().className='main';//设置类名document.body.appendChild(g3d.getView());//添加3d组件到bodywindow.addEventListener('resize',function(e){g3d.invalidate();},false);g2d=newht.graph.GraphView(dm);g2d.setAutoScrollZone(-1);//设置自动滚动区域的大小，当鼠标距拓扑边缘的距离小于此值时，拓扑会自动滚动（调整translateX或translateY）g2d.getView().className='g2d';g2d.setEditable(true);//设置拓扑中的图元是否可编辑document.body.appendChild(g2d.getView());ht.Default.callLater(g2d.fitContent,g2d,[true,50,true]);//获取全局下一个id号g3d.setHeadlightRange(2000);//光照影响范围，默认为0表示可以照射到无穷远，如果设置了该值，光照射效果会随着物体远离光影而衰减。所有HT组件的根层是一个div组件，可以通过组件的getView()函数获取，该方法用于向body中添加3D和2D组件。只要3D和2D共享同一个数据容器，数据容器中的图元就是共享的。也就是说，我们只要将图元进行2D或者3D排列，其余组件中图元的布局和样式都是按照排列好的组件来排列的。添加灯光场景中出现的灯光，除了旋转灯外，还有两个静态的红灯和黄灯，当旋转灯照在其他地方时，可以看得更清楚：redLight=newht.Light();//lightclassredLight.p3(0,0,-175);//实例变量位置redLight.s({'light.color':'red',//灯光颜色'light.range':400//Lamp的影响范围，默认为0表示可以照射到无限远，如果设置了该值，光线照射效果会随着物体远离光影而衰减});dm.add(redLight);//添加实例变量到数据容量rotateLight=newht.Light();rotateLight.s({'light.color':'green','light.type':'spot'//默认为点光源，可设置为spot聚光灯，和directional定向光类型});dm.add(rotateLight);yellowLight=newht.Light();yellowLight.p3(0,0,60);yellowLight.s({'light.color':'yellow','light.range':200});dm.add（黄光）；场景中模型的构建从地板的创建开始。地板是圆形地板。通过设置styleshape3d为cylinder，剩下的只需要设置size，Position和style等：floor=newht.Node();//Nodenodeclassfloor.s3(1100,10,1100);floor.p3(0,-100,-110);floor.s({'shape3d':'cylinder',//设置3D模型为圆形'shape3d.side':100,//默认值为0,决定了3D图形显示为多少条边，为0时显示光滑的表面效果'shape3d.color':'white',//默认值为#3498DB，3d图形的整体颜色'3d.selectable':false,//默认值为true，控制图元在Graph3dView'2d.visibl上是否可以被选中e':false//默认值为true，控制图元在GraphView上是否可见});dm.add（楼层）；然后在地板周围添加8个圆柱体：for(vari=0;i<8;i++){varangle=Math.PI*2*i/8;pillar=newht.Node();pillar.s({'shape3d':'cylinder','shape3d.color':'white','shape':'circle',//多边形类型图元，为空时显示为图片'shape.background':'gray'//多边形类型图元背景});pillar.s3(50,180,50);支柱。p3(数学.cos(角度)*480,0,-110+数学.sin(角度)*480);dm.add(pillar);}这些“箭头”作为贴图的模型也是有的，各种各样的，这里我只分析一个，比较前面部分的“波动”，具体描述请参考shape手册多边形：图像部分是由ht.Default.setImage函数创建的名为箭头的纹理shape3=newht.Shape();//多边形类dm.add(shape3);shape3.setTall(60);//设置高度shape3.setThickness(0);//设置厚度shape3.s({//setStyle'shape.background':null,'shape.border.width':10,//Polygontypeprimitiveborderwidth'shape.border.color':'blue','all.visible':false,//6面是否可见'front.visible':true,'front.blend':'blue',//正面颜色'front.reverse.flip':true,//正面是否显示正面内容'front.image':'arrow',//正面纹理'front.uv.scale':[16,3]//正面纹理的uv缩放，格式为[3,2]});shape3.setPoints([//设置点数Group{x:0,y:0},{x:25,y:-25},{x:50,y:0},{x:75,y:25},{x:100,y:0},{x:125,y:-25},{x:150,y:0},{x:175,y:25},{x:200,y:0}]);shape3.setSegments([//描述点连接方式1,//moveTo3,//quadraticCurveTo3,//quadraticCurveTo3,//quadraticCurveTo3//quadraticCurveTo]);shape3.p3(-100,0,100);shape3.setRotationZ(-Math.PI/2);//设置图元在3D拓扑中沿z轴的旋转角度（以弧度为单位）设置定时器使每个模型中的图片“流动”并旋转旋转光的偏移量=0；角度=0;setInterval(函数(){角度+=Math.PI/50；rotateLight.p3(400*Math.cos(angle),70,-110+400*Math.sin(angle));//设置旋转光偏移的坐标+=0.1;uvOffset=[偏移量,0];shape1.s({'front.uv.offset':uvOffset//正面纹理的uv缩放，格式为[3,2]});shape2.s({'front.uv.offset':uvOffset});shape3.s({'front.uv.offset':uvOffset});shape4.s({'front.uv.offset':uvOffset});shape5.s({'shape3d.uv.offset':uvOffset,//确定3d图形整体纹理的uv缩放，格式为[3,2]'shape3d.top.uv.offset':uvOffset,//确定3d图形顶部纹理的uv缩放，格式为[3,2]'shape3d.bottom.uv.offset':uvOffset//确定3d图形底部纹理的uv缩放，格式为[3,2]});cylinder.s({'shape3d.uv.offset':uvOffset});torus.s({'shape3d.uv.offset':uvOffset});},200);整个例子就结束了，感觉是“小代码，大作用”。代码量小，简单，效果很好。有兴趣的可以去官网或者手册查看其他例子
