From 3b7e102b522756307f1e61558f219c4fe901bdc8 Mon Sep 17 00:00:00 2001
From: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>
Date: Sun, 25 Jan 2026 11:13:00 +0900
Subject: [PATCH] [backport cloud/1.37] Add 3d control buttons to linear mode
 (#8289)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Backport of #8178 to `cloud/1.37`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8289-backport-cloud-1-37-Add-3d-control-buttons-to-linear-mode-2f26d73d3650817290ebf575f5f7a7a4)
by [Unito](https://www.unito.io)

Co-authored-by: AustinMroz <austin@comfy.org>
Co-authored-by: Alexander Brown <drjkl@comfy.org>
---
 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 9022c2d2d..56fb98105 100644
--- a/src/composables/useLoad3dViewer.ts
+++ b/src/composables/useLoad3dViewer.ts
@@ -616,6 +616,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>