关于前端:三维拓扑元素介绍之TNode

上一篇介绍了了三维 topo 的基本概念。本篇持续介绍三维拓扑的相干元素，三维拓扑的次要元素包含：

• TNode 节点元素
• TLink 连线元素
• TGroup 分组元素
• TSubnet 子网元素

本文次要介绍 TNode 的应用阐明。

TNode

TNode 示意拓扑图中一个节点对象。最终体现是一个三维对象。TNode 的结构如下：

let node = new eg.TNode(params);
node.setName(name);

其中 params 传递的是结构一个 TNode 所须要的参数。其中，能够通过图片，根本形态，obj 模型或者 gltf 模型来结构。
而 name 示意 TNode 的名称，名称会在节点顶部用冒泡的形式进行显示。

应用图片结构 TNode

应用一张图片结构 TNode，其中的体现是一个 Sprite 对象。如下代码所示：

let imageNode2 = new eg.TNode({
     image: "./images/access.png",
     width:130,
     height:80,
 });
imageNode2.setName("imageNode2");

其中 width 和 height 为可选参数，当不指定 width 或者 height 的时候，默认应用图片自身的 width 和 height。最终显示成果如下图所示：

应用根本形态结构 TNode

能够通过立方体，球体，圆柱体，立体等结构 TNode。示例代码如下：

let cubeNode = new eg.TNode({
  shape:"cube",
  width:100,
  height:100,
  depth:100
});
cubeNode.setName("cube node");

其中 shape 反对如下选项：

• cube 示意立方体，对应的参数是 width，height，depth
• sphere 示意球体，对应的参数 radius
• cylinder 示意圆柱体，对应的参数有 radiusTop，radiusBottom,height

• plane 示意立体，对应的参加有 width，height

  let planeNode = new eg.TNode({
    shape:"plane",
    width:100,
    height:100
  });
  planeNode.p(-100,0,0);
  planeNode.setName("plane node");
  
  let sphereNode = new eg.TNode({
        shape:"sphere",
        radius:50
  })
  sphereNode.p(100,0,0);
  sphereNode.setName("Sphere Node");
  let cylinderNode = new eg.TNode({
    shape:"cylinder",
    radiusTop:50,
    radiusBottom:50,
    height:50,
  })
  cylinderNode.setName("Cylinder Node");

显示成果如下：

应用 obj 模型结构 TNode

应用 obj 模型文件结构 TNode，最终的体现是一个 Mesh 对象的成果。如下代码所示：

let objNode = new eg.TNode({
  objPath: "./assets/objs/dingshi/dingshi.obj",
  mtlPath: "./assets/objs/dingshi/dingshi.mtl",
})
objNode.setName("obj node");

其中 objPath 和 mtlPath 指定 obj 模型文件的门路。最终成果如下所示：

应用 gltf 模型结构 TNode

应用 gltf 模型文件结构 TNode，最终的体现是一个 Mesh 对象的成果。如下代码所示：

let gltfNode = new eg.TNode({gltfPath: './assets/gltf/icon.gltf',});
gltfNode.setName("gltf node");
gltfNode.setScale(12);
gltfNode.p(100, 100, 100);

其中 gltfPath 指定 gltf 模型文件的门路，最终显示成果如下：

总结

本文介绍了 TNode 的各种构造方法，并介绍了 TNode 的 setName 办法。通过文中的构造方法，能够满足绝大多数的结构须要。

欢送关注公众号：” 图易可视化 ”。