当前位置: 首页 > Web前端 > HTML

TNode

时间:2023-03-28 10:26:34 HTML

3D拓扑元素介绍上一篇文章介绍了3D拓扑的基本概念。本文继续介绍3D拓扑的相关元素。3D拓扑的主要元素包括:TNode节点元素TLink链路元素TGroup组元素TSubnet子网元素本文主要介绍TNode的使用说明。TNodeTNode表示拓扑图中的节点对象。最终表示是一个三维物体。TNode的构造如下:letnode=neweg.TNode(params);node.setName(名字);其中params传递构造TNode所需的参数。其中,可以通过图片、基本形状、obj模型或者gltf模型来构建。而name代表TNode的名字,名字会以冒泡的方式显示在节点的最上方。用图片构造TNode用图片构造TNode,其表示是一个Sprite对象。如下代码所示:letimageNode2=neweg.TNode({image:"./images/access.png",width:130,height:80,});imageNode2.setName("imageNode2");其中width和height是可选参数。当不指定宽高时,默认使用图片本身的宽高。最终显示效果如下图所示:使用基本形状构造TNodeTNode可以由立方体、球体、圆柱体、平面等构造。示例代码如下:letcubeNode=neweg.TNode({shape:"cube",width:100,height:100,depth:100});cubeNode.setName("立方体节点");其中shape支持以下选项:cube表示一个立方体,对应的参数是width,height,depthsphere表示一个球体,对应的参数radiuscylinder表示一个圆柱体,对应的参数是radiusTop,radiusBottom,heightplane表示一个平面,对应的参与是宽度,heightletplaneNode=neweg.TNode({shape:"plane",width:100,height:100});planeNode.p(-100,0,0);planeNode.setName("planenode");letsphereNode=neweg.TNode({shape:"sphere",radius:50})sphereNode.p(100,0,0);sphereNode.setName("SphereNode");letcylinderNode=neweg.TNode({shape:"cylinder",radiusTop:50,radiusBottom:50,height:50,})cylinderNode.setName("CylinderNode");展示效果如下:使用obj模型构建TNode使用obj模型文件构建TNode,最终表现出来的是一个Mesh对象的效果。如下代码所示:letobjNode=neweg.TNode({objPath:"./assets/objs/dingshi/dingshi.obj",mtlPath:"./assets/objs/dingshi/dingshi.mtl",})对象节点。setName("对象节点");其中objPath和mtlPath指定obj模型文件的路径。最终效果如下:使用gltf模型构建TNode使用gltf模型文件构建TNode,最终表现是一个Mesh对象的效果。如下代码所示:letgltfNode=neweg.TNode({gltfPath:'./assets/gltf/icon.gltf',});gltfNode.setName("gltfnode");gltfNode.setScale(12);gltfNode.p(100,100,100);其中gltfPath指定了gltf模型文件的路径,最终显示效果如下:总结本文介绍了TNode的各种构造方法,介绍了TNode的setName方法。通过本文的施工方法,可以满足大部分的施工需求。欢迎关注公众号:《人物轻松可视化》。