Show 3D components in different view modes (wireframe, solid, material preview) #29

This issue will implement forced render modes to render the scene in different materials.

• Modes should be added to the settings array here: https://github.com/trytriplex/triplex/blob/main/packages/renderer/src/features/scene-controls/controls-three-fiber.ts#L10
• Group name should be "Viewport Shading"
• A component called ViewportShading should be created in a sibling file called viewport-shading.tsx to https://github.com/trytriplex/triplex/blob/main/packages/renderer/src/features/canvas/canvas.tsx and then rendered in the Canvas component. This component will listen for events and then apply the material overrides.
• An example of applying a material override is: scene.overrideMaterial, use the useThree(store => store.scene) hook to get ahold of the scene.
• There should be three modes: Wireframe, Solid, Material Preview.
• Wireframe should set the overrideMaterial to a wireframe material, solid to one that hard hard edges, and material preview just sets the material override to undefined
• Handle edge cases e.g. if userland sets their own material override should be used instead of undefined
• Listening for events looks like this, where id is the id set in the controls-three-fiber.tsx file, and scope is "scene".

  import { on } from "@triplex/bridge/client";
  on("extension-point-triggered", ({ id, scope }) => {});
  

This should be enough to get you started.