From ef2d34c56039fa8ae9860041c2ed77c6910cdafb Mon Sep 17 00:00:00 2001
From: AustinMroz <austin@comfy.org>
Date: Fri, 23 Jan 2026 19:24:48 -0800
Subject: [PATCH] Add 3d control buttons to linear mode (#8178)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds control buttons to the top left of the 3d preview in linear mode.
<img width="460" alt="image"
src="https://github.com/user-attachments/assets/35a83b9c-65af-46c3-a910-be5ad30c428e"
/>


This was deprioritized because I forgot the secret to magically
unwrapping a set of refs (wrap them in another ref).

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8178-Add-3d-control-buttons-to-linear-mode-2ee6d73d3650816ab1a8e73ace1bdbc7)
by [Unito](https://www.unito.io)
---
 src/composables/useLoad3dViewer.ts            |  6 +++-
 .../extensions/linearMode/Preview3d.vue       | 32 +++++++++++++------
 2 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/composables/useLoad3dViewer.ts b/src/composables/useLoad3dViewer.ts
index 38b4a9f54..94e4ebc24 100644
--- a/src/composables/useLoad3dViewer.ts
+++ b/src/composables/useLoad3dViewer.ts
@@ -630,6 +630,10 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
     handleBackgroundImageUpdate,
     handleModelDrop,
     handleSeek,
-    cleanup
+    cleanup,
+
+    hasSkeleton: false,
+    intensity: lightIntensity,
+    showSkeleton: false
   }
 }
diff --git a/src/renderer/extensions/linearMode/Preview3d.vue b/src/renderer/extensions/linearMode/Preview3d.vue
index 25e4c355e..554f0cddc 100644
--- a/src/renderer/extensions/linearMode/Preview3d.vue
+++ b/src/renderer/extensions/linearMode/Preview3d.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { useTemplateRef, watch } from 'vue'
+import { ref, useTemplateRef, watch } from 'vue'
 
+import Load3DControls from '@/components/load3d/Load3DControls.vue'
 import AnimationControls from '@/components/load3d/controls/AnimationControls.vue'
 import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
 
@@ -10,12 +11,12 @@ const { modelUrl } = defineProps<{
 
 const containerRef = useTemplateRef('containerRef')
 
-const viewer = useLoad3dViewer()
+const viewer = ref(useLoad3dViewer())
 
 watch([containerRef, () => modelUrl], async () => {
   if (!containerRef.value || !modelUrl) return
 
-  await viewer.initializeStandaloneViewer(containerRef.value, modelUrl)
+  await viewer.value.initializeStandaloneViewer(containerRef.value, modelUrl)
 })
 
 //TODO: refactor to add control buttons
@@ -29,14 +30,25 @@ watch([containerRef, () => modelUrl], async () => {
     @resize="viewer.handleResize"
   >
     <div class="pointer-events-none absolute top-0 left-0 size-full">
+      <Load3DControls
+        v-model:scene-config="viewer"
+        v-model:model-config="viewer"
+        v-model:camera-config="viewer"
+        v-model:light-config="viewer"
+        :is-splat-model="viewer.isSplatModel"
+        :is-ply-model="viewer.isPlyModel"
+        :has-skeleton="viewer.hasSkeleton"
+        @update-background-image="viewer.handleBackgroundImageUpdate"
+        @export-model="viewer.exportModel"
+      />
       <AnimationControls
-        v-if="viewer.animations.value && viewer.animations.value.length > 0"
-        v-model:animations="viewer.animations.value"
-        v-model:playing="viewer.playing.value"
-        v-model:selected-speed="viewer.selectedSpeed.value"
-        v-model:selected-animation="viewer.selectedAnimation.value"
-        v-model:animation-progress="viewer.animationProgress.value"
-        v-model:animation-duration="viewer.animationDuration.value"
+        v-if="viewer.animations && viewer.animations.length > 0"
+        v-model:animations="viewer.animations"
+        v-model:playing="viewer.playing"
+        v-model:selected-speed="viewer.selectedSpeed"
+        v-model:selected-animation="viewer.selectedAnimation"
+        v-model:animation-progress="viewer.animationProgress"
+        v-model:animation-duration="viewer.animationDuration"
         @seek="viewer.handleSeek"
       />
     </div>