mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
afa10f7a1e
Summary Fully Refactored the Load3D module to improve architecture and maintainability by consolidating functionality into a centralized composable pattern and simplifying component structure. and support VueNodes system Changes - Architecture: Introduced new useLoad3d composable to centralize 3D loading logic and state management - Component Simplification: Removed redundant components (Load3DAnimation.vue, Load3DAnimationScene.vue, PreviewManager.ts) - Support VueNodes - improve config store - remove lineart output due Animation doesnot support it, may add it back later - remove Preview screen and keep scene in fixed ratio in load3d (not affect preview3d) - improve record video feature which will already record video by same ratio as scene Need BE change https://github.com/comfyanonymous/ComfyUI/pull/10025 https://github.com/user-attachments/assets/9e038729-84a0-45ad-b0f2-11c57d7e0c9a ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5765-refactor-refactor-load3d-2796d73d365081728297cc486e2e9052) by [Unito](https://www.unito.io)
71 lines
1.9 KiB
Vue
71 lines
1.9 KiB
Vue
<template>
|
|
<div class="flex flex-col">
|
|
<Button class="p-button-rounded p-button-text" @click="switchCamera">
|
|
<i
|
|
v-tooltip.right="{
|
|
value: $t('load3d.switchCamera'),
|
|
showDelay: 300
|
|
}"
|
|
:class="['pi', getCameraIcon, 'text-lg text-white']"
|
|
/>
|
|
</Button>
|
|
<div v-if="showFOVButton" class="show-fov relative">
|
|
<Button class="p-button-rounded p-button-text" @click="toggleFOV">
|
|
<i
|
|
v-tooltip.right="{ value: $t('load3d.fov'), showDelay: 300 }"
|
|
class="pi pi-expand text-lg text-white"
|
|
/>
|
|
</Button>
|
|
<div
|
|
v-show="showFOV"
|
|
class="absolute top-0 left-12 rounded-lg bg-black/50 p-4 shadow-lg"
|
|
style="width: 150px"
|
|
>
|
|
<Slider v-model="fov" class="w-full" :min="10" :max="150" :step="1" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Button from 'primevue/button'
|
|
import Slider from 'primevue/slider'
|
|
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
|
|
|
import type { CameraType } from '@/extensions/core/load3d/interfaces'
|
|
|
|
const showFOV = ref(false)
|
|
|
|
const cameraType = defineModel<CameraType>('cameraType')
|
|
const fov = defineModel<number>('fov')
|
|
const showFOVButton = computed(() => cameraType.value === 'perspective')
|
|
const getCameraIcon = computed(() => {
|
|
return cameraType.value === 'perspective' ? 'pi-camera' : 'pi-camera'
|
|
})
|
|
|
|
const toggleFOV = () => {
|
|
showFOV.value = !showFOV.value
|
|
}
|
|
|
|
const switchCamera = () => {
|
|
cameraType.value =
|
|
cameraType.value === 'perspective' ? 'orthographic' : 'perspective'
|
|
}
|
|
|
|
const closeCameraSlider = (e: MouseEvent) => {
|
|
const target = e.target as HTMLElement
|
|
|
|
if (!target.closest('.show-fov')) {
|
|
showFOV.value = false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('click', closeCameraSlider)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
document.removeEventListener('click', closeCameraSlider)
|
|
})
|
|
</script>
|