import { Canvas, CanvasEvent } from '@antv/g';
import { Renderer } from '@antv/g-webgl';
import { Plugin as Plugin3D } from '@antv/g-plugin-3d';

// create a renderer
const renderer = new Renderer();
renderer.registerPlugin(new Plugin3D());

// create a canvas
const canvas = new Canvas({
    container: 'container',
    width: 600,
    height: 500,
    renderer,
});

(async () => {
    // wait for canvas' initialization complete
    await canvas.ready;

    // use GPU device
    const plugin = renderer.getPlugin('device-renderer');
    const device = plugin.getDevice();
})();

import { MeshBasicMaterial, CubeGeometry, Mesh } from '@antv/g-plugin-3d';

// 立方体几何
const cubeGeometry = new CubeGeometry(device, {
    width: 200,
    height: 200,
    depth: 200,
});
// 基础材质
const basicMaterial = new MeshBasicMaterial(device);

const cube = new Mesh({
    style: {
        fill: '#1890FF',
        opacity: 1,
        geometry: cubeGeometry,
        material: basicMaterial,
    },
});

cube.setPosition(300, 250, 0);
canvas.appendChild(cube);