Used same gizmo examples from main

examples/src/examples/gizmos/transform-rotate.controls.mjs

@@ -0,0 +1,179 @@
+import * as pc from 'playcanvas';
+
+/**
+ * @param {import('../../app/components/Example.mjs').ControlOptions} options - The options.
+ * @returns {JSX.Element} The returned JSX Element.
+ */
+export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+    const { BindingTwoWay, LabelGroup, Panel, ColorPicker, SliderInput, SelectInput, BooleanInput } = ReactPCUI;
+
+    const [proj, setProj] = React.useState(pc.PROJECTION_PERSPECTIVE);
+
+    return fragment(
+        jsx(
+            Panel,
+            { headerText: 'Transform' },
+            jsx(
+                LabelGroup,
+                { text: 'Coord Space' },
+                jsx(SelectInput, {
+                    options: [
+                        { v: 'world', t: 'World' },
+                        { v: 'local', t: 'Local' }
+                    ],
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.coordSpace' }
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Size' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.size' },
+                    min: 0.1,
+                    max: 2.0
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Snap Increment' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.snapIncrement' },
+                    min: 1,
+                    max: 10,
+                    precision: 0
+                })
+            )
+        ),
+        jsx(
+            Panel,
+            { headerText: 'Color' },
+            jsx(
+                LabelGroup,
+                { text: 'X Axis' },
+                jsx(ColorPicker, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.xAxisColor' }
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Y Axis' },
+                jsx(ColorPicker, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.yAxisColor' }
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Z Axis' },
+                jsx(ColorPicker, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.zAxisColor' }
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Color Alpha' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.colorAlpha' },
+                    min: 0,
+                    max: 1,
+                    precision: 2
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Shading' },
+                jsx(BooleanInput, {
+                    type: 'toggle',
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.shading' }
+                })
+            )
+        ),
+        jsx(
+            Panel,
+            { headerText: 'Intersection' },
+            jsx(
+                LabelGroup,
+                { text: 'Ring Tolerance' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.ringTolerance' },
+                    min: 0,
+                    max: 0.5,
+                    precision: 2
+                })
+            )
+        ),
+        jsx(
+            Panel,
+            { headerText: 'Render' },
+            jsx(
+                LabelGroup,
+                { text: 'XYZ Tube Radius' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.xyzTubeRadius' }
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'XYZ Ring Radius' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.xyzRingRadius' }
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Face Tube Radius' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.faceTubeRadius' }
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Face Ring Radius' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.faceRingRadius' },
+                    max: 2
+                })
+            )
+        ),
+        jsx(
+            Panel,
+            { headerText: 'Camera' },
+            jsx(
+                LabelGroup,
+                { text: 'Projection' },
+                jsx(SelectInput, {
+                    options: [
+                        { v: pc.PROJECTION_PERSPECTIVE + 1, t: 'Perspective' },
+                        { v: pc.PROJECTION_ORTHOGRAPHIC + 1, t: 'Orthographic' }
+                    ],
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'camera.proj' },
+                    onSelect: value => setProj((parseInt(value, 10) || 1) - 1)
+                })
+            ),
+            proj === pc.PROJECTION_PERSPECTIVE &&
+                jsx(
+                    LabelGroup,
+                    { text: 'FOV' },
+                    jsx(SliderInput, {
+                        binding: new BindingTwoWay(),
+                        link: { observer, path: 'camera.fov' },
+                        min: 30,
+                        max: 100
+                    })
+                )
+        )
+    );
+}

examples/src/examples/gizmos/transform-rotate.example.mjs

@@ -0,0 +1,171 @@
+import * as pc from 'playcanvas';
+import { data } from 'examples/observer';
+import { deviceType, rootPath } from 'examples/utils';
+
+const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('application-canvas'));
+window.focus();
+
+const gfxOptions = {
+    deviceTypes: [deviceType],
+    glslangUrl: rootPath + '/static/lib/glslang/glslang.js',
+    twgslUrl: rootPath + '/static/lib/twgsl/twgsl.js'
+};
+
+const device = await pc.createGraphicsDevice(canvas, gfxOptions);
+device.maxPixelRatio = Math.min(window.devicePixelRatio, 2);
+
+const createOptions = new pc.AppOptions();
+createOptions.graphicsDevice = device;
+createOptions.mouse = new pc.Mouse(document.body);
+createOptions.keyboard = new pc.Keyboard(window);
+
+createOptions.componentSystems = [
+    pc.RenderComponentSystem,
+    pc.CameraComponentSystem,
+    pc.LightComponentSystem,
+    pc.ScriptComponentSystem
+];
+createOptions.resourceHandlers = [pc.TextureHandler, pc.ContainerHandler, pc.ScriptHandler, pc.FontHandler];
+
+const app = new pc.AppBase(canvas);
+app.init(createOptions);
+
+// set the canvas to fill the window and automatically change resolution to be the same as the canvas size
+app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
+app.setCanvasResolution(pc.RESOLUTION_AUTO);
+
+// load assets
+const assets = {
+    script: new pc.Asset('script', 'script', { url: rootPath + '/static/scripts/camera/orbit-camera.js' }),
+    font: new pc.Asset('font', 'font', { url: rootPath + '/static/assets/fonts/courier.json' })
+};
+/**
+ * @param {pc.Asset[] | number[]} assetList - The asset list.
+ * @param {pc.AssetRegistry} assetRegistry - The asset registry.
+ * @returns {Promise<void>} The promise.
+ */
+function loadAssets(assetList, assetRegistry) {
+    return new Promise((resolve) => {
+        const assetListLoader = new pc.AssetListLoader(assetList, assetRegistry);
+        assetListLoader.load(resolve);
+    });
+}
+await loadAssets(Object.values(assets), app.assets);
+
+app.start();
+
+// scene settings
+app.scene.ambientLight = new pc.Color(0.2, 0.2, 0.2);
+
+// create entities
+const box = new pc.Entity('box');
+box.addComponent('render', {
+    type: 'box'
+});
+app.root.addChild(box);
+
+// create camera entity
+const camera = new pc.Entity('camera');
+camera.addComponent('camera', {
+    clearColor: new pc.Color(0.1, 0.1, 0.1),
+    farClip: 1000
+});
+camera.addComponent('script');
+const orbitCamera = camera.script.create('orbitCamera');
+camera.script.create('orbitCameraInputMouse');
+camera.script.create('orbitCameraInputTouch');
+camera.setPosition(1, 1, 1);
+app.root.addChild(camera);
+orbitCamera.distance = 5 * camera.camera.aspectRatio;
+data.set('camera', {
+    proj: camera.camera.projection + 1,
+    fov: camera.camera.fov
+});
+
+// create light entity
+const light = new pc.Entity('light');
+light.addComponent('light');
+app.root.addChild(light);
+light.setEulerAngles(0, 0, -60);
+
+// create gizmo
+const layer = pc.Gizmo.createLayer(app);
+const gizmo = new pc.RotateGizmo(camera.camera, layer);
+gizmo.attach(box);
+data.set('gizmo', {
+    size: gizmo.size,
+    snapIncrement: gizmo.snapIncrement,
+    xAxisColor: Object.values(gizmo.xAxisColor),
+    yAxisColor: Object.values(gizmo.yAxisColor),
+    zAxisColor: Object.values(gizmo.zAxisColor),
+    colorAlpha: gizmo.colorAlpha,
+    shading: gizmo.shading,
+    coordSpace: gizmo.coordSpace,
+    ringTolerance: gizmo.ringTolerance,
+    xyzTubeRadius: gizmo.xyzTubeRadius,
+    xyzRingRadius: gizmo.xyzRingRadius,
+    faceTubeRadius: gizmo.faceTubeRadius,
+    faceRingRadius: gizmo.faceRingRadius
+});
+
+// controls hook
+const tmpC = new pc.Color();
+data.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
+    const [category, key] = path.split('.');
+    switch (category) {
+        case 'camera':
+            switch (key) {
+                case 'proj':
+                    camera.camera.projection = value - 1;
+                    break;
+                case 'fov':
+                    camera.camera.fov = value;
+                    break;
+            }
+            return;
+        case 'gizmo':
+            // @ts-ignore
+            if (gizmo[key] instanceof pc.Color) {
+                // @ts-ignore
+                gizmo[key] = tmpC.set(...value);
+                return;
+            }
+
+            // @ts-ignore
+            gizmo[key] = value;
+    }
+});
+
+// ensure canvas is resized when window changes size + keep gizmo size consistent to canvas size
+const resize = () => {
+    app.resizeCanvas();
+    const bounds = canvas.getBoundingClientRect();
+    const dim = camera.camera.horizontalFov ? bounds.width : bounds.height;
+    data.set('gizmo.size', 1024 / dim);
+};
+window.addEventListener('resize', resize);
+resize();
+
+// grid lines
+const createGridLines = (size = 1) => {
+    const lines = [];
+    for (let i = -size; i < size + 1; i++) {
+        lines.push(
+            new pc.Vec3(-size, 0, i),
+            new pc.Vec3(size, 0, i),
+            new pc.Vec3(i, 0, -size),
+            new pc.Vec3(i, 0, size)
+        );
+    }
+    return lines;
+};
+
+const lines = createGridLines(2);
+const gridCol = new pc.Color(1, 1, 1, 0.5);
+app.on('update', () => app.drawLines(lines, gridCol));
+
+app.on('destroy', () => {
+    window.removeEventListener('resize', resize);
+});
+
+export { app };