Add `Mirror` component in spoke

src/config.js

@@ -50,6 +50,8 @@ import ScenePreviewCameraNode from "./editor/nodes/ScenePreviewCameraNode";
 import ScenePreviewCameraNodeEditor from "./ui/properties/ScenePreviewCameraNodeEditor";
 import AudioZoneNode from "./editor/nodes/AudioZoneNode";
 import AudioZoneNodeEditor from "./ui/properties/AudioZoneNodeEditor";
+import MirrorNode from "./editor/nodes/MirrorNode";
+import MirrorNodeEditor from "./ui/properties/MirrorNodeEditor";
 
 import MediaFrameNode from "./editor/nodes/MediaFrameNode";
 import MediaFrameNodeEditor from "./ui/properties/MediaFrameNodeEditor";
@@ -93,6 +95,7 @@ export function createEditor(api, settings) {
   editor.registerNode(ScenePreviewCameraNode, ScenePreviewCameraNodeEditor);
   editor.registerNode(MediaFrameNode, MediaFrameNodeEditor);
   editor.registerNode(AudioZoneNode, AudioZoneNodeEditor);
+  editor.registerNode(MirrorNode, MirrorNodeEditor);
 
   editor.registerSource(new ElementsSource(editor));
   editor.registerSource(new MyAssetsSource(editor));

src/editor/nodes/MirrorNode.js

@@ -0,0 +1,48 @@
+import Mirror from "../objects/Mirror";
+import EditorNodeMixin from "./EditorNodeMixin";
+
+export default class MirrorNode extends EditorNodeMixin(Mirror) {
+  static componentName = "mirror";
+
+  static nodeName = "Mirror";
+
+  static async deserialize(editor, json) {
+    const node = await super.deserialize(editor, json);
+
+    const { color } = json.components.find(c => c.name === MirrorNode.componentName).props;
+
+    node.color = color;
+
+    return node;
+  }
+
+  constructor(editor) {
+    super(editor);
+  }
+
+  copy(source, recursive = true) {
+    super.copy(source, recursive);
+
+    this.color = source.color;
+
+    return this;
+  }
+
+  serialize() {
+    return super.serialize({
+      [MirrorNode.componentName]: {
+        color: this.color
+      }
+    });
+  }
+
+  prepareForExport() {
+    super.prepareForExport();
+
+    this.addGLTFComponent("mirror", {
+      color: this.color
+    });
+
+    this.replaceObject();
+  }
+}

src/editor/objects/Mirror.js

@@ -2,10 +2,10 @@ import { Object3D, PlaneBufferGeometry, Color } from "three";
 import { Reflector } from "three/examples/jsm/objects/Reflector";
 
 export default class Mirror extends Object3D {
-  constructor() {
+  constructor(color) {
     super();
 
-    this.mesh = new Reflector(new PlaneBufferGeometry());
+    this.mesh = new Reflector(new PlaneBufferGeometry(), { color });
     this.add(this.mesh);
   }
 

src/ui/properties/MirrorNodeEditor.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Mirror } from "styled-icons/octicons/Mirror";
+
+import useSetPropertySelected from "./useSetPropertySelected";
+import NodeEditor from "./NodeEditor";
+import InputGroup from "../inputs/InputGroup";
+import ColorInput from "../inputs/ColorInput";
+
+export default function MirrorNodeEditor(props) {
+  const { node, editor } = props;
+  const onChangeColor = useSetPropertySelected(editor, "color");
+
+  return (
+    <NodeEditor {...props} description={MirrorNodeEditor.description}>
+      <InputGroup name="Color">
+        <ColorInput value={node.color} onChange={onChangeColor} />
+      </InputGroup>
+    </NodeEditor>
+  );
+}
+
+MirrorNodeEditor.propTypes = {
+  editor: PropTypes.object,
+  node: PropTypes.object
+};
+
+MirrorNodeEditor.iconComponent = Mirror;
+
+MirrorNodeEditor.description = "Renders a plane mirror.";