Update preview group creation to handle wireframe display mode

src/viewport-three/viewport-host.ts

@@ -2987,18 +2987,21 @@ export class ViewportHost {
         fallbackGroup.visible = false;
         return fallbackGroup;
       }
-      case "entity":
+      case "entity": {
+        let previewGroup: Group;
+
         switch (toolPreview.target.entityKind) {
           case "pointLight":
-            return this.createPointLightGizmoRenderObjects(
+            previewGroup = this.createPointLightGizmoRenderObjects(
               "creation-preview",
               previewPosition,
               DEFAULT_POINT_LIGHT_DISTANCE,
               PLACEMENT_PREVIEW_COLOR_HEX,
               false
             ).group;
+            break;
           case "spotLight":
-            return this.createSpotLightGizmoRenderObjects(
+            previewGroup = this.createSpotLightGizmoRenderObjects(
               "creation-preview",
               previewPosition,
               DEFAULT_SPOT_LIGHT_DIRECTION,
@@ -3007,8 +3010,9 @@ export class ViewportHost {
               PLACEMENT_PREVIEW_COLOR_HEX,
               false
             ).group;
+            break;
           case "playerStart":
-            return this.createPlayerStartRenderObjects(
+            previewGroup = this.createPlayerStartRenderObjects(
               "creation-preview",
               previewPosition,
               DEFAULT_PLAYER_START_YAW_DEGREES,
@@ -3021,8 +3025,9 @@ export class ViewportHost {
               },
               false
             ).group;
+            break;
           case "soundEmitter":
-            return this.createSoundEmitterRenderObjects(
+            previewGroup = this.createSoundEmitterRenderObjects(
               "creation-preview",
               previewPosition,
               DEFAULT_SOUND_EMITTER_REF_DISTANCE,
@@ -3030,31 +3035,41 @@ export class ViewportHost {
               false,
               BOX_CREATE_PREVIEW_FILL
             ).group;
+            break;
           case "triggerVolume":
-            return this.createTriggerVolumeRenderObjects(
+            previewGroup = this.createTriggerVolumeRenderObjects(
               "creation-preview",
               previewPosition,
               DEFAULT_TRIGGER_VOLUME_SIZE,
               false,
               BOX_CREATE_PREVIEW_FILL
             ).group;
+            break;
           case "teleportTarget":
-            return this.createTeleportTargetRenderObjects(
+            previewGroup = this.createTeleportTargetRenderObjects(
               "creation-preview",
               previewPosition,
               DEFAULT_TELEPORT_TARGET_YAW_DEGREES,
               false,
               BOX_CREATE_PREVIEW_FILL
             ).group;
+            break;
           case "interactable":
-            return this.createInteractableRenderObjects(
+            previewGroup = this.createInteractableRenderObjects(
               "creation-preview",
               previewPosition,
               DEFAULT_INTERACTABLE_RADIUS,
               false,
               BOX_CREATE_PREVIEW_FILL
             ).group;
+            break;
         }
+        if (this.displayMode === "wireframe") {
+          this.applyWireframePresentation(previewGroup);
+        }
+
+        return previewGroup;
+      }
       case "model-instance": {
         const asset = this.projectAssets[toolPreview.target.assetId];
         const loadedAsset = this.loadedModelAssets[toolPreview.target.assetId];
@@ -3072,7 +3087,14 @@ export class ViewportHost {
           scale: DEFAULT_MODEL_INSTANCE_SCALE
         });
 
-        return createModelInstanceRenderGroup(dummyModelInstance, asset, loadedAsset, false, BOX_CREATE_PREVIEW_FILL);
+        return createModelInstanceRenderGroup(
+          dummyModelInstance,
+          asset,
+          loadedAsset,
+          false,
+          BOX_CREATE_PREVIEW_FILL,
+          this.displayMode === "wireframe" ? "wireframe" : "normal"
+        );
       }
     }
 

tests/domain/editor-store.test.ts

@@ -74,7 +74,7 @@ describe("EditorStore", () => {
     writerStore.setViewportLayoutMode("quad");
     writerStore.setActiveViewportPanel("bottomRight");
     writerStore.setViewportPanelViewMode("topLeft", "top");
-    writerStore.setViewportPanelDisplayMode("topLeft", "authoring");
+    writerStore.setViewportPanelDisplayMode("topLeft", "wireframe");
     writerStore.setViewportPanelCameraState("topLeft", {
       target: {
         x: 6,
@@ -107,7 +107,7 @@ describe("EditorStore", () => {
     expect(readerStore.getState().activeViewportPanelId).toBe("bottomRight");
     expect(readerStore.getState().viewportPanels.topLeft).toMatchObject({
       viewMode: "top",
-      displayMode: "authoring",
+      displayMode: "wireframe",
       cameraState: {
         target: {
           x: 6,

tests/serialization/local-draft-storage.test.ts

@@ -126,6 +126,7 @@ describe("local draft storage", () => {
 
     viewportLayoutState.layoutMode = "quad";
     viewportLayoutState.activePanelId = "bottomRight";
+    viewportLayoutState.panels.topLeft.displayMode = "wireframe";
     viewportLayoutState.panels.topLeft.cameraState.target = {
       x: 8,
       y: 3,
@@ -151,6 +152,7 @@ describe("local draft storage", () => {
         activePanelId: "bottomRight",
         panels: {
           topLeft: {
+            displayMode: "wireframe",
             cameraState: {
               target: {
                 x: 8,

tests/unit/viewport-layout.test.ts

@@ -39,6 +39,7 @@ describe("viewport layout", () => {
     expect(getViewportLayoutModeLabel("single")).toBe("Single View");
     expect(getViewportLayoutModeLabel("quad")).toBe("4-Panel");
     expect(getViewportDisplayModeLabel("authoring")).toBe("Authoring");
+    expect(getViewportDisplayModeLabel("wireframe")).toBe("Wireframe");
     expect(getViewportPanelLabel("topRight")).toBe("Top Right");
   });
 });