mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
ef2d34c560
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)
57 lines
1.8 KiB
Vue
57 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
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'
|
|
|
|
const { modelUrl } = defineProps<{
|
|
modelUrl: string
|
|
}>()
|
|
|
|
const containerRef = useTemplateRef('containerRef')
|
|
|
|
const viewer = ref(useLoad3dViewer())
|
|
|
|
watch([containerRef, () => modelUrl], async () => {
|
|
if (!containerRef.value || !modelUrl) return
|
|
|
|
await viewer.value.initializeStandaloneViewer(containerRef.value, modelUrl)
|
|
})
|
|
|
|
//TODO: refactor to add control buttons
|
|
</script>
|
|
<template>
|
|
<div
|
|
ref="containerRef"
|
|
class="relative w-full h-full"
|
|
@mouseenter="viewer.handleMouseEnter"
|
|
@mouseleave="viewer.handleMouseLeave"
|
|
@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 && 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>
|
|
</div>
|
|
</template>
|