Meshpicker

import {
  Camera,
  Scene,
  Node,
  WebGPURenderer,
  Material,
  getDevice,
} 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) {
    throw new Error("Canvas not found");
  }

  const device = await getDevice();
  const camera = new Camera();
  const renderer = new WebGPURenderer(device, canvas);
  renderer.renderOptions.postfx = false;

  // 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 scene
  const scene = new Scene();

  // create two nodes
  for (let i = 0; i < 2; i++) {
    const node = new Node();
    node.name = `node-${i}`;
    node.mesh = mesh;
    node.material = new Material();
    node.material.model = "unlit";
    node.material.color = [1 - i, i, 0];
    node.transform.setPosition([-0.2 + 0.4 * i, 0.0, 0]);
    scene.root.addChild(node);
  }

  // Handle click
  canvas.addEventListener("click", (e) => {
    renderer.pickScene(e.offsetX, e.offsetY).then((node) => {
      scene.root.setOutline(false, true);
      if (node) {
        node.setOutline(true);
        console.log("picked", node.name);
      } else {
        console.log("clear");
      }
      renderer.render(scene, camera);
    });
    renderer.render(scene, camera);
  });

  renderer.render(scene, camera);
}