Gizmo

Transform gizmo example.

import {
  Camera,
  Scene,
  Node,
  WebGPURenderer,
  Material,
  getDevice,
  TransformGizmo
} from "@tmrw-realityos/charm";

export async function ready() {
  // get the html canvas, create a camera and start the render
  const canvas = document.querySelector("canvas");
  if (canvas == null) {
    return;
  }
  const device = await getDevice();
  const camera = new Camera();
  const renderer = new WebGPURenderer(device, canvas);
  // create a single triangle mesh
  const mesh = renderer.newMesh();
  mesh.positions = [-0.2, 0.2, 0, -0.2, -0.2, 0, 0.2, -0.2, 0];
  mesh.mustUpdate = true;

  // create a node for our mesh together with a simple unlit material
  const node = new Node();
  node.mesh = mesh;
  node.material = new Material();
  node.material.model = "unlit";

  // create a scene for our single node and begin render it
  const scene = new Scene();
  scene.root.addChild(node);

  // create gizmo
  const gizmo = new TransformGizmo(renderer);
  gizmo.setTargets([node]);

  const mousepos = [0,0];
  renderer.onRenderGizmos = () => {
    gizmo.render(renderer, mousepos)
  }

  const onmouse = (e) => {
    mousepos[0] = e.offsetX;
    mousepos[1] = e.offsetY;
    gizmo.onMouse(e);
  }

  canvas.addEventListener("pointerdown", onmouse);
  canvas.addEventListener("pointermove", onmouse);
  canvas.addEventListener("pointerup", onmouse);

  const loop = () => {
    renderer.render(scene, camera);
    requestAnimationFrame(loop)
  }
  loop();
}