@antv/g6-extension-3d
v0.1.5
Published
3D extension for G6
Downloads
174
Maintainers
Readme
3D extension for G6
This extension package provides 3D elements, behaviors and plugins for G6.
Usage
- Install
npm install @antv/g6-extension-3d
- Import and Register
Where renderer, elements and lighting are necessary
import { ExtensionCategory, register } from '@antv/g6';
import { DragCanvas3D, Light, Line3D, Sphere, renderer } from '@antv/g6-extension-3d';
// 3d light plugin
register(ExtensionCategory.PLUGIN, '3d-light', Light);
// sphere node element
register(ExtensionCategory.NODE, 'sphere', Sphere);
// line edge element
register(ExtensionCategory.EDGE, 'line3d', Line3D);
// drag canvas in 3d scene
register(ExtensionCategory.BEHAVIOR, 'drag-canvas-3d', DragCanvas3D);
// camera setting plugin
register(ExtensionCategory.PLUGIN, 'camera-setting', CameraSetting);
- Use
import { Graph } from '@antv/g6';
const graph = new Graph({
container: 'container',
renderer, // use 3d renderer
data: {
// your data
},
node: {
type: 'sphere', // use sphere node
},
edge: {
type: 'line3d', // use 3d line edge
},
behaviors: ['drag-canvas-3d'],
plugins: [
// set camera configs, see: https://g.antv.antgroup.com/en/api/camera/intro
{
type: 'camera-setting',
projectionMode: 'perspective',
near: 0.1,
far: 1000,
fov: 45,
aspect: 1,
},
// add directional light
{
type: '3d-light',
directional: {
direction: [0, 0, 1],
},
},
],
});