feat: sphere shape used in 3d lib #5375 (#5412)

* feat: sphere shape used in 3d lib #5375 * fix: remove lighting initialization from geometry * fix: add grid on x-z & y-z planes * fix: support perspective * chore: add 3d charts example in site * chore: add 3d chart manual * fix: depth should work in chart api * chore: update usage of threelib * chore: fix test case for stdlib
antvis · Aug 18, 2023 · 85abdc3 · 85abdc3
1 parent ad245db
commit 85abdc3
Show file tree

Hide file tree

Showing 64 changed files with 1,613 additions and 78 deletions.
diff --git a/__tests__/main.ts b/__tests__/main.ts
@@ -1,8 +1,6 @@
 import { Canvas } from '@antv/g';
 import { Renderer as CanvasRenderer } from '@antv/g-canvas';
 import { Plugin as DragAndDropPlugin } from '@antv/g-plugin-dragndrop';
-import { Plugin as ControlPlugin } from '@antv/g-plugin-control';
-import { Plugin as ThreeDPlugin } from '@antv/g-plugin-3d';
 import { Renderer as SVGRenderer } from '@antv/g-svg';
 import { Renderer as WebGLRenderer } from '@antv/g-webgl';
 import { stdlib, render } from '../src';
@@ -151,10 +149,6 @@ function createSpecRender(object) {
       renderer.registerPlugin(
         new DragAndDropPlugin({ dragstartDistanceThreshold: 1 }),
       );
-      if (selectRenderer.value === 'webgl') {
-        renderer.registerPlugin(new ControlPlugin());
-        renderer.registerPlugin(new ThreeDPlugin());
-      }
       canvas = new Canvas({
         container: document.createElement('div'),
         width,

diff --git a/__tests__/plots/api/chart-render-3d-scatter-plot-perspective.ts b/__tests__/plots/api/chart-render-3d-scatter-plot-perspective.ts
@@ -0,0 +1,65 @@
+import { CameraType } from '@antv/g';
+import { Renderer as WebGLRenderer } from '@antv/g-webgl';
+import { Plugin as ThreeDPlugin, DirectionalLight } from '@antv/g-plugin-3d';
+import { Plugin as ControlPlugin } from '@antv/g-plugin-control';
+import { Runtime, extend } from '../../../src/api';
+import { corelib, threedlib } from '../../../src/lib';
+
+export function chartRender3dScatterPlotPerspective(context) {
+  const { container } = context;
+
+  // Create a WebGL renderer.
+  const renderer = new WebGLRenderer();
+  renderer.registerPlugin(new ThreeDPlugin());
+  renderer.registerPlugin(new ControlPlugin());
+
+  const Chart = extend(Runtime, { ...corelib(), ...threedlib() });
+  const chart = new Chart({
+    container,
+    theme: 'classic',
+    renderer,
+    depth: 400,
+  });
+
+  chart
+    .point3D()
+    .data({
+      type: 'fetch',
+      value: 'data/cars2.csv',
+    })
+    .encode('x', 'Horsepower')
+    .encode('y', 'Miles_per_Gallon')
+    .encode('z', 'Weight_in_lbs')
+    .encode('size', 'Origin')
+    .encode('color', 'Cylinders')
+    .encode('shape', 'cube')
+    .coordinate({ type: 'cartesian3D' })
+    .scale('x', { nice: true })
+    .scale('y', { nice: true })
+    .scale('z', { nice: true })
+    .legend(false)
+    .axis('x', { gridLineWidth: 2 })
+    .axis('y', { gridLineWidth: 2, titleBillboardRotation: -Math.PI / 2 })
+    .axis('z', { gridLineWidth: 2 });
+
+  const finished = chart.render().then(() => {
+    const { canvas } = chart.getContext();
+    const camera = canvas!.getCamera();
+    camera.setPerspective(0.1, 5000, 45, 500 / 500);
+    camera.setType(CameraType.ORBITING);
+
+    // Add a directional light into scene.
+    const light = new DirectionalLight({
+      style: {
+        intensity: 3,
+        fill: 'white',
+        direction: [-1, 0, 1],
+      },
+    });
+    canvas!.appendChild(light);
+  });
+
+  return { finished };
+}
+
+chartRender3dScatterPlotPerspective.skip = true;
diff --git a/__tests__/plots/api/chart-render-3d-scatter-plot.ts b/__tests__/plots/api/chart-render-3d-scatter-plot.ts
@@ -0,0 +1,65 @@
+import { CameraType } from '@antv/g';
+import { Renderer as WebGLRenderer } from '@antv/g-webgl';
+import { Plugin as ThreeDPlugin, DirectionalLight } from '@antv/g-plugin-3d';
+import { Plugin as ControlPlugin } from '@antv/g-plugin-control';
+import { Runtime, extend } from '../../../src/api';
+import { corelib, threedlib } from '../../../src/lib';
+
+export function chartRender3dScatterPlot(context) {
+  const { container } = context;
+
+  // Create a WebGL renderer.
+  const renderer = new WebGLRenderer();
+  renderer.registerPlugin(new ThreeDPlugin());
+  renderer.registerPlugin(new ControlPlugin());
+
+  const Chart = extend(Runtime, { ...corelib(), ...threedlib() });
+  const chart = new Chart({
+    container,
+    theme: 'classic',
+    renderer,
+    depth: 400,
+  });
+
+  chart
+    .point3D()
+    .data({
+      type: 'fetch',
+      value: 'data/cars2.csv',
+    })
+    .encode('x', 'Horsepower')
+    .encode('y', 'Miles_per_Gallon')
+    .encode('z', 'Weight_in_lbs')
+    .encode('size', 'Origin')
+    .encode('color', 'Cylinders')
+    .encode('shape', 'cube')
+    .coordinate({ type: 'cartesian3D' })
+    .scale('x', { nice: true })
+    .scale('y', { nice: true })
+    .scale('z', { nice: true })
+    .legend(false)
+    .axis('x', { gridLineWidth: 2 })
+    .axis('y', { gridLineWidth: 2, titleBillboardRotation: -Math.PI / 2 })
+    .axis('z', { gridLineWidth: 2 });
+
+  const finished = chart.render().then(() => {
+    const { canvas } = chart.getContext();
+    const camera = canvas!.getCamera();
+    camera.setType(CameraType.ORBITING);
+    camera.rotate(-20, -20, 0);
+
+    // Add a directional light into scene.
+    const light = new DirectionalLight({
+      style: {
+        intensity: 2.5,
+        fill: 'white',
+        direction: [-1, 0, 1],
+      },
+    });
+    canvas!.appendChild(light);
+  });
+
+  return { finished };
+}
+
+chartRender3dScatterPlot.skip = true;
diff --git a/__tests__/plots/api/index.ts b/__tests__/plots/api/index.ts
@@ -41,3 +41,5 @@ export { chartChangeDataLegend } from './chart-change-data-legend';
 export { chartTooltipMultiChart } from './chart-tooltip-multi-chart';
 export { chartOnTextClick } from './chart-on-text-click';
 export { chartRenderEvent } from './chart-render-event';
+export { chartRender3dScatterPlot } from './chart-render-3d-scatter-plot';
+export { chartRender3dScatterPlotPerspective } from './chart-render-3d-scatter-plot-perspective';
diff --git a/__tests__/unit/coordinate/index.spec.ts b/__tests__/unit/coordinate/index.spec.ts
@@ -4,6 +4,7 @@ import {
   Transpose,
   Parallel,
   Fisheye,
+  Cartesian3D,
 } from '../../../src/coordinate';
 
 describe('coordinate', () => {
@@ -50,4 +51,8 @@ describe('coordinate', () => {
   it('Fisheye({...}) returns expected coordinate transformations', () => {
     expect(Fisheye({})).toEqual([['fisheye', 0, 0, 2, 2, false]]);
   });
+
+  it('Cartesian3D({...}) returns expected coordinate transformations', () => {
+    expect(Cartesian3D({})).toEqual([['cartesian3D']]);
+  });
 });
diff --git a/__tests__/unit/lib/geo.spec.ts b/__tests__/unit/lib/geo.spec.ts
@@ -2,7 +2,7 @@ import { geolib } from '../../../src/lib';
 import { GeoView, GeoPath } from '../../../src/composition';
 
 describe('geolib', () => {
-  it('geolib() should returns expected geo compoents.', () => {
+  it('geolib() should returns expected geo components.', () => {
     expect(geolib()).toEqual({
       'composition.geoView': GeoView,
       'composition.geoPath': GeoPath,

diff --git a/__tests__/unit/lib/threed.spec.ts b/__tests__/unit/lib/threed.spec.ts
@@ -0,0 +1,14 @@
+import { threedlib } from '../../../src/lib';
+import { Cartesian3D } from '../../../src/coordinate';
+import { AxisZ } from '../../../src/component';
+import { Point3D } from '../../../src/mark';
+
+describe('threedlib', () => {
+  it('threedlib() should returns expected threed components.', () => {
+    expect(threedlib()).toEqual({
+      'coordinate.cartesian3D': Cartesian3D,
+      'component.axisZ': AxisZ,
+      'mark.point3D': Point3D,
+    });
+  });
+});
diff --git a/site/.dumi/global.ts b/site/.dumi/global.ts
@@ -22,8 +22,11 @@ if (window) {
     window as any
   ).gPluginRoughCanvasRenderer = require('@antv/g-plugin-rough-canvas-renderer');
   (window as any).gPluginA11y = require('@antv/g-plugin-a11y');
+  (window as any).gPluginControl = require('@antv/g-plugin-control');
+  (window as any).gPlugin3d = require('@antv/g-plugin-3d');
   (window as any).gSvg = require('@antv/g-svg');
   (window as any).gWebgl = require('@antv/g-webgl');
+  (window as any).g = require('@antv/g');
   (window as any).fecha = require('fecha');
   (window as any).React = require('react');
   (window as any).dataSet = require('@antv/data-set');
@@ -113,8 +116,10 @@ function extendG2(g2) {
       'frame',
       'x',
       'y',
+      'z',
       'width',
       'height',
+      'depth',
       ...dimensionKeys('margin'),
       ...dimensionKeys('padding'),
       ...dimensionKeys('inset'),

diff --git a/site/.dumirc.ts b/site/.dumirc.ts
@@ -215,6 +215,14 @@ export default defineConfig({
         },
         order: 14,
       },
+      {
+        slug: 'spec/threed',
+        title: {
+          zh: '3D 图表 - 3D Charts',
+          en: '3D',
+        },
+        order: 15,
+      },
       {
         slug: 'spec/theme',
         title: {
@@ -329,6 +337,14 @@ export default defineConfig({
         },
         icon: 'other',
       },
+      {
+        slug: 'threed',
+        title: {
+          zh: '3D 可视化',
+          en: '3D Charts',
+        },
+        icon: 'other',
+      },
       {
         slug: 'interesting',
         title: {

diff --git a/site/docs/api/chart.zh.md b/site/docs/api/chart.zh.md
@@ -37,6 +37,7 @@ chart.render();
 | container | 指定 chart 绘制的 DOM，可以传入 DOM id，也可以直接传入 dom 实例                                                                                                                               | `string \| HTMLElement` |        |
 | width     | 图表宽度                                                                                                                                                                                      | `number`                | 640    |
 | height    | 图表高度                                                                                                                                                                                      | `number`                | 480    |
+| depth     | 图表深度，在 3D 图表中使用                                                                                                                                                                    | `number`                | 0      |
 | renderer  | 指定渲染引擎，默认使用 canvas。                                                                                                                                                               |                         |        |
 | plugins   | 指定渲染时使用的插件 ，具体见 [plugin](/api/plugin/rough)                                                                                                                                     | `any[]`                 |        |
 | autoFit   | 图表是否自适应容器宽高，默认为 `false`，用户需要手动设置 `width` 和 `height`。<br/>当 `autoFit: true` 时，会自动取图表容器的宽高，如果用户设置了 `height`，那么会以用户设置的 `height` 为准。 | `boolean`               | false  |
@@ -109,7 +110,9 @@ chart.render();
 添加 rangeY 图形，具体见 [mark](/spec/mark/range-y)。
 
 ### `chart.connector`
+
 <!-- 暂缺 -->
+
 添加 connector 图形，具体见 [mark](/spec/mark/connector)。
 
 ### `chart.sankey`
@@ -192,6 +195,10 @@ chart.render();
 
 添加 timingKeyframe 图形，具体见 [composition](/spec/composition/timing-keyframe)。
 
+### `chart.point3D`
+
+添加 point3D 图形，具体见 [3d](/spec/threed/point-threed)。
+
 ## 设置属性
 
 ### `chart.width`
@@ -215,11 +222,15 @@ chart.render();
 设置图形的数据，支持多种数据来源和数据变换，具体见 [data](/spec/data/overview)。
 
 ### `chart.encode`
+
 <!-- 暂缺 -->
+
 设置图形每个通道的字段名称，具体见 [encode](/api/encode/overview)。
 
 ### `chart.scale`
+
 <!-- 概况中的 scale 介绍更清晰 -->
+
 设置图形每个通道的比例尺，具体见 [scale](/spec/overview#scale)。
 
 ### `chart.legend`
@@ -243,15 +254,19 @@ chart.render();
 设置图形的标签，具体见 [label](/spec/label/overview)。
 
 ### `chart.style`
+
 <!-- common 未放开，但可以跳转 -->
+
 设置图形的样式，具体见 [style](/spec/common/style)。
 
 ### `chart.theme`
 
 设置图形的主题，具体见 [theme](/spec/theme/academy)。
 
 ### `chart.labelTransform`
+
 <!-- 缺失 -->
+
 设置图形的 labelTransform，具体见 [label](/spec/label/overview)
 
 ## 渲染图表

diff --git a/site/docs/api/overview.zh.md b/site/docs/api/overview.zh.md
@@ -46,6 +46,7 @@ order: 1
 - [chart.**timingKeyframe**](/api/chart#charttimingkeyframe) - 添加 timingKeyframe 到该图表。
 - [chart.**geoView**](/api/chart#chartgeoview) - 添加 geoView 到该图表。
 - [chart.**geoPath**](/api/chart#chartgeopath) - 添加 geoPath 到该图表。
+- [chart.**point3D**](/api/chart#chartpoint3d) - 添加 point3D 标记到该视图。
 
 ### 设置属性
 

diff --git a/site/docs/manual/core/coordinate.zh.md b/site/docs/manual/core/coordinate.zh.md
@@ -327,3 +327,11 @@ chart.area():
   return chart.getContainer();
 })();
 ```
+
+## 3D 坐标系
+
+目前我们仅支持 `cartesian3D` 坐标系：
+
+```ts
+chart.coordinate({ type: 'cartesian3D' });
+```
diff --git a/site/docs/manual/core/encode.zh.md b/site/docs/manual/core/encode.zh.md
@@ -244,6 +244,7 @@ chart.encode('y', 'end').encode('y1', 'start');
 
 - **x** - x 位置
 - **y** - y 位置
+- **z** - z 位置
 - **color** - 颜色，填充色或者边框色，由形状决定
 - **opacity** - 透明度，填充透明度或者边框透明度，由样式决定
 - **shape** - 形状

diff --git a/site/docs/manual/extra-topics/3d-charts.en.md b/site/docs/manual/extra-topics/3d-charts.en.md
@@ -0,0 +1,6 @@
+---
+title: Use 3D Charts
+order: 11
+---
+
+<embed src="@/docs/manual/extra-topics/3d-charts.zh.md"></embed>