上一篇介绍了了三维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方法。通过文中的构造方法,可以满足绝大多数的构造需要。
欢迎关注公众号:"图易可视化"。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。