chore: update 3d relative docs

__tests__/plots/api/chart-3d.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 { threedlib } from '@antv/g2-extension-3d';
+import { Runtime, extend } from '../../../src/api';
+import { corelib } from '../../../src/lib';
+
+export function chart3d(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,
+    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 };
+}
+
+chart3d.skip = true;

__tests__/plots/api/index.ts

@@ -46,3 +46,4 @@ export { chartOnBrushHighlightTooltip } from './chart-on-brush-highlight-tooltip
 export { chartChangeSizeCustomShape } from './chart-change-size-custom-shape';
 export { chartOptionsCallbackChildren } from './chart-options-callback-children';
 export { chartAutoFitSlider } from './chart-auto-fit-slider';
+export { chart3d } from './chart-3d';

package.json

@@ -85,6 +85,7 @@
     "@antv/g-plugin-rough-svg-renderer": "^1.7.9",
     "@antv/g-svg": "^1.10.20",
     "@antv/g2-extension-ava": "^0.1.1",
+    "@antv/g2-extension-3d": "^0.1.0",
     "@antv/translator": "^1.0.0",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^17.4.4",

site/docs/manual/extra-topics/3d-charts.en.md

@@ -5,13 +5,13 @@ order: 11
 
 Taking a 3D scatter plot as an example, creating the chart requires the following steps:
 
-* Create WebGL renderers and plugin.
-* Extend threedlib.
-* Set z-channel, scale and axes.
-* Set up the camera in the scene.
-* Add light source.
-* Add custom legend.
-* Using camera interaction and animation.
+- Create WebGL renderers and plugin.
+- Extend threedlib.
+- Set z-channel, scale and axes.
+- Set up the camera in the scene.
+- Add light source.
+- Add custom legend.
+- Using camera interaction and animation.
 
 ## Create WebGL renderers and plugin
 
@@ -23,8 +23,8 @@ $ npm install @antv/g-webgl @antv/g-plugin-3d @antv/g-plugin-control --save
 
 and then use [@antv/g-webgl](https://g.antv.antgroup.com/api/renderer/webgl) as a renderer and register the following two plugins:
 
-* [g-plugin-3d](https://g.antv.antgroup.com/plugins/3d) Provide geometry, materials and lighting in 3D scenes.
-* [g-plugin-control](https://g.antv.antgroup.com/plugins/control) Provide camera interaction in 3D scenes.
+- [g-plugin-3d](https://g.antv.antgroup.com/plugins/3d) Provide geometry, materials and lighting in 3D scenes.
+- [g-plugin-control](https://g.antv.antgroup.com/plugins/control) Provide camera interaction in 3D scenes.
 
 ```ts
 import { Renderer as WebGLRenderer } from '@antv/g-webgl';
@@ -41,7 +41,8 @@ renderer.registerPlugin(new ControlPlugin());
 Due to the huge size of 3D-related functional code, we separated it into [threedlib](/manual/extra-topics/bundle#g2threedlib), extend it and customize the Chart object at runtime:
 
 ```ts
-import { Runtime, corelib, threedlib, extend } from '@antv/g2';
+import { Runtime, corelib, extend } from '@antv/g2';
+import { threedlib } from '@antv/g2-extension-3d';
 
 const Chart = extend(Runtime, { ...corelib(), ...threedlib() });
 ```
@@ -105,11 +106,14 @@ The effect is as follows:
   renderer.registerPlugin(new gPluginControl.Plugin());
   renderer.registerPlugin(new gPlugin3d.Plugin());
 
-  const Chart = G2.extend(G2.Runtime, { ...G2.corelib(), ...G2.threedlib() });
+  const Chart = G2.extend(G2.Runtime, {
+    ...G2.corelib(),
+    ...g2Extension3d.threedlib(),
+  });
 
   // initialize Chart instance
   const chart = new Chart({
-      renderer,
+    renderer,
     width: 500,
     height: 500,
     depth: 400,
@@ -168,11 +172,14 @@ camera.rotate(-20, -20, 0);
   renderer.registerPlugin(new gPluginControl.Plugin());
   renderer.registerPlugin(new gPlugin3d.Plugin());
 
-  const Chart = G2.extend(G2.Runtime, { ...G2.corelib(), ...G2.threedlib() });
+  const Chart = G2.extend(G2.Runtime, {
+    ...G2.corelib(),
+    ...g2Extension3d.threedlib(),
+  });
 
   // initialize Chart instance
   const chart = new Chart({
-      renderer,
+    renderer,
     width: 500,
     height: 500,
     depth: 400,
@@ -244,11 +251,14 @@ we can use `intensity` to increase the intensity of the light source:
   renderer.registerPlugin(new gPluginControl.Plugin());
   renderer.registerPlugin(new gPlugin3d.Plugin());
 
-  const Chart = G2.extend(G2.Runtime, { ...G2.corelib(), ...G2.threedlib() });
+  const Chart = G2.extend(G2.Runtime, {
+    ...G2.corelib(),
+    ...g2Extension3d.threedlib(),
+  });
 
   // initialize Chart instance
   const chart = new Chart({
-      renderer,
+    renderer,
     width: 500,
     height: 500,
     depth: 400,
@@ -372,11 +382,14 @@ This is because graphics in a 3D scene are all affected by the camera, but HUD c
   renderer.registerPlugin(new gPluginControl.Plugin());
   renderer.registerPlugin(new gPlugin3d.Plugin());
 
-  const Chart = G2.extend(G2.Runtime, { ...G2.corelib(), ...G2.threedlib() });
+  const Chart = G2.extend(G2.Runtime, {
+    ...G2.corelib(),
+    ...g2Extension3d.threedlib(),
+  });
 
   // initialize Chart instance
   const chart = new Chart({
-      renderer,
+    renderer,
     width: 500,
     height: 500,
     depth: 400,
@@ -535,11 +548,14 @@ button.onclick = () => {
   renderer.registerPlugin(new gPluginControl.Plugin());
   renderer.registerPlugin(new gPlugin3d.Plugin());
 
-  const Chart = G2.extend(G2.Runtime, { ...G2.corelib(), ...G2.threedlib() });
+  const Chart = G2.extend(G2.Runtime, {
+    ...G2.corelib(),
+    ...g2Extension3d.threedlib(),
+  });
 
   // initialize Chart instance
   const chart = new Chart({
-      renderer,
+    renderer,
     width: 500,
     height: 500,
     depth: 400,

site/docs/manual/extra-topics/3d-charts.zh.md

@@ -106,7 +106,10 @@ chart.render().then(() => {
   renderer.registerPlugin(new gPluginControl.Plugin());
   renderer.registerPlugin(new gPlugin3d.Plugin());
 
-  const Chart = G2.extend(G2.Runtime, { ...G2.corelib(), ...G2.threedlib() });
+  const Chart = G2.extend(G2.Runtime, {
+    ...G2.corelib(),
+    ...g2Extension3d.threedlib(),
+  });
 
   // 初始化图表实例
   const chart = new Chart({
@@ -169,7 +172,10 @@ camera.rotate(-20, -20, 0);
   renderer.registerPlugin(new gPluginControl.Plugin());
   renderer.registerPlugin(new gPlugin3d.Plugin());
 
-  const Chart = G2.extend(G2.Runtime, { ...G2.corelib(), ...G2.threedlib() });
+  const Chart = G2.extend(G2.Runtime, {
+    ...G2.corelib(),
+    ...g2Extension3d.threedlib(),
+  });
 
   // 初始化图表实例
   const chart = new Chart({
@@ -245,7 +251,10 @@ canvas.appendChild(light);
   renderer.registerPlugin(new gPluginControl.Plugin());
   renderer.registerPlugin(new gPlugin3d.Plugin());
 
-  const Chart = G2.extend(G2.Runtime, { ...G2.corelib(), ...G2.threedlib() });
+  const Chart = G2.extend(G2.Runtime, {
+    ...G2.corelib(),
+    ...g2Extension3d.threedlib(),
+  });
 
   // 初始化图表实例
   const chart = new Chart({
@@ -373,7 +382,10 @@ chart.legend(false);
   renderer.registerPlugin(new gPluginControl.Plugin());
   renderer.registerPlugin(new gPlugin3d.Plugin());
 
-  const Chart = G2.extend(G2.Runtime, { ...G2.corelib(), ...G2.threedlib() });
+  const Chart = G2.extend(G2.Runtime, {
+    ...G2.corelib(),
+    ...g2Extension3d.threedlib(),
+  });
 
   // 初始化图表实例
   const chart = new Chart({
@@ -536,7 +548,10 @@ button.onclick = () => {
   renderer.registerPlugin(new gPluginControl.Plugin());
   renderer.registerPlugin(new gPlugin3d.Plugin());
 
-  const Chart = G2.extend(G2.Runtime, { ...G2.corelib(), ...G2.threedlib() });
+  const Chart = G2.extend(G2.Runtime, {
+    ...G2.corelib(),
+    ...g2Extension3d.threedlib(),
+  });
 
   // 初始化图表实例
   const chart = new Chart({

site/docs/spec/threed/intervalThreed.zh.md

@@ -21,7 +21,10 @@ order: 3
   renderer.registerPlugin(new gPluginControl.Plugin());
   renderer.registerPlugin(new gPlugin3d.Plugin());
 
-  const Chart = G2.extend(G2.Runtime, { ...G2.corelib(), ...G2.threedlib() });
+  const Chart = G2.extend(G2.Runtime, {
+    ...G2.corelib(),
+    ...g2Extension3d.threedlib(),
+  });
 
   // 初始化图表实例
   const chart = new Chart({

site/docs/spec/threed/lineThreed.zh.md

@@ -20,7 +20,10 @@ order: 2
   renderer.registerPlugin(new gPluginControl.Plugin());
   renderer.registerPlugin(new gPlugin3d.Plugin());
 
-  const Chart = G2.extend(G2.Runtime, { ...G2.corelib(), ...G2.threedlib() });
+  const Chart = G2.extend(G2.Runtime, {
+    ...G2.corelib(),
+    ...g2Extension3d.threedlib(),
+  });
 
   // 初始化图表实例
   const chart = new Chart({

site/docs/spec/threed/pointThreed.zh.md

@@ -20,7 +20,10 @@ order: 1
   renderer.registerPlugin(new gPluginControl.Plugin());
   renderer.registerPlugin(new gPlugin3d.Plugin());
 
-  const Chart = G2.extend(G2.Runtime, { ...G2.corelib(), ...G2.threedlib() });
+  const Chart = G2.extend(G2.Runtime, {
+    ...G2.corelib(),
+    ...g2Extension3d.threedlib(),
+  });
 
   // 初始化图表实例
   const chart = new Chart({
@@ -91,7 +94,10 @@ order: 1
   renderer.registerPlugin(new gPluginControl.Plugin());
   renderer.registerPlugin(new gPlugin3d.Plugin());
 
-  const Chart = G2.extend(G2.Runtime, { ...G2.corelib(), ...G2.threedlib() });
+  const Chart = G2.extend(G2.Runtime, {
+    ...G2.corelib(),
+    ...g2Extension3d.threedlib(),
+  });
 
   // 初始化图表实例
   const chart = new Chart({