feat: add plane-node for v5

packages/g6/src/stdlib/index.ts

@@ -34,6 +34,7 @@ const {
   ModelRectNode,
   ImageNode,
   CubeNode,
+  PlaneNode,
   BaseNode,
   BaseNode3D,
 } = Nodes;
@@ -255,6 +256,7 @@ const Extensions = {
   EllipseNode,
   ModelRectNode,
   CubeNode,
+  PlaneNode,
   BaseNode,
   BaseNode3D,
   // edges

packages/g6/src/stdlib/item/node/index.ts

@@ -10,5 +10,6 @@ export * from './diamond';
 export * from './modelRect';
 export * from './image';
 export * from './cube';
+export * from './plane';
 export * from './base';
 export * from './base3d';

packages/g6/src/stdlib/item/node/plane.ts

@@ -0,0 +1,105 @@
+import { DisplayObject } from '@antv/g';
+import { NodeDisplayModel } from '../../../types';
+import { State } from '../../../types/item';
+import {
+  NodeModelData,
+  NodeShapeMap,
+  NodeShapeStyles,
+} from '../../../types/node';
+import { BaseNode3D } from './base3d';
+
+export class PlaneNode extends BaseNode3D {
+  override defaultStyles = {
+    keyShape: {
+      width: 100,
+      depth: 100,
+      materialType: 'basic',
+      materialProps: {
+        wireframe: false,
+        wireframeColor: 'black',
+        cullMode: 0,
+      },
+      x: 0,
+      y: 0,
+      z: 0,
+    },
+  };
+  mergedStyles: NodeShapeStyles;
+  constructor(props) {
+    super(props);
+  }
+  public draw(
+    model: NodeDisplayModel,
+    shapeMap: NodeShapeMap,
+    diffData?: { previous: NodeModelData; current: NodeModelData },
+    diffState?: { previous: State[]; current: State[] },
+  ): NodeShapeMap {
+    const { data = {} } = model;
+
+    let shapes: NodeShapeMap = { keyShape: undefined };
+
+    // keyShape
+    shapes.keyShape = this.drawKeyShape(model, shapeMap, diffData);
+
+    // haloShape
+    if (data.haloShape && this.drawHaloShape) {
+      shapes.haloShape = this.drawHaloShape(model, shapeMap, diffData);
+    }
+
+    // labelShape
+    if (data.labelShape) {
+      shapes.labelShape = this.drawLabelShape(model, shapeMap, diffData);
+    }
+
+    // labelBackgroundShape
+    if (data.labelBackgroundShape) {
+      shapes.labelBackgroundShape = this.drawLabelBackgroundShape(
+        model,
+        shapeMap,
+        diffData,
+      );
+    }
+
+    // iconShape
+    if (data.iconShape) {
+      shapes.iconShape = this.drawIconShape(model, shapeMap, diffData);
+    }
+
+    // badgeShape
+    if (data.badgeShapes) {
+      const badgeShapes = this.drawBadgeShapes(
+        model,
+        shapeMap,
+        diffData,
+        diffState,
+      );
+      shapes = {
+        ...shapes,
+        ...badgeShapes,
+      };
+    }
+
+    // otherShapes
+    if (data.otherShapes && this.drawOtherShapes) {
+      shapes = {
+        ...shapes,
+        ...this.drawOtherShapes(model, shapeMap, diffData),
+      };
+    }
+    return shapes;
+  }
+
+  public drawKeyShape(
+    model: NodeDisplayModel,
+    shapeMap: NodeShapeMap,
+    diffData?: { previous: NodeModelData; current: NodeModelData },
+    diffState?: { previous: State[]; current: State[] },
+  ): DisplayObject {
+    return this.upsertShape(
+      'plane',
+      'keyShape',
+      this.mergedStyles.keyShape,
+      shapeMap,
+    );
+  }
+}

packages/g6/src/util/shape3d.ts

@@ -33,7 +33,7 @@ export const createShape3D = (
   }
 
   // materialType: 'lambert' | 'phong' | 'basic', TODO: type
-  const { materialType = 'lambert', ...otherStyles } = style as any;
+  const { materialType = 'lambert', materialProps = {}, ...otherStyles } = style as any;
   if (!device.GeometryCache) {
     device.GeometryCache = {};
   }
@@ -59,21 +59,23 @@ export const createShape3D = (
       case 'basic':
         device.MaterialCache[materialType as string] = new MeshBasicMaterial(
           device,
+          materialProps
         );
         break;
       case 'phong': {
-        const materialProps = {
-          shininess: 30,
-        };
         device.MaterialCache[materialType as string] = new MeshPhongMaterial(
           device,
-          materialProps,
+            {
+              shininess: 30,
+              ...materialProps
+            }
         );
       }
       case 'lambert':
       default: {
         device.MaterialCache[materialType as string] = new MeshLambertMaterial(
           device,
+          materialProps
         );
         break;
       }
@@ -104,7 +106,7 @@ export const createShape3D = (
       ]);
       break;
     case 'plane':
-      shape.scale([style.width / GEOMETRY_SIZE, style.depth / GEOMETRY_SIZE]);
+      shape.scale(style.width / GEOMETRY_SIZE, style.depth / GEOMETRY_SIZE);
       break;
     case 'sphere':
     default: {