mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
879cb8f1a8
## Summary Adds panoramic image support to the 3D node viewer, allowing users to display equirectangular panoramic images as immersive backgrounds alongside the existing tiled image mode. ## Changes - Toggle between tiled and panorama rendering modes for background images - Field of view (FOV) control for panorama mode - Refactored FOV slider into reusable PopupSlider component ## Screenshots https://github.com/user-attachments/assets/8955d74b-b0e6-4b26-83ca-ccf902b43aa6 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6638-support-panoramic-image-in-3d-node-2a56d73d365081b98647f988130e312e) by [Unito](https://www.unito.io)
36 lines
985 B
Vue
36 lines
985 B
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', 'pi-camera', 'text-lg text-white']"
|
|
/>
|
|
</Button>
|
|
<PopupSlider
|
|
v-if="showFOVButton"
|
|
v-model="fov"
|
|
:tooltip-text="$t('load3d.fov')"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Button from 'primevue/button'
|
|
import { computed } from 'vue'
|
|
|
|
import PopupSlider from '@/components/load3d/controls/PopupSlider.vue'
|
|
import type { CameraType } from '@/extensions/core/load3d/interfaces'
|
|
|
|
const cameraType = defineModel<CameraType>('cameraType')
|
|
const fov = defineModel<number>('fov')
|
|
const showFOVButton = computed(() => cameraType.value === 'perspective')
|
|
|
|
const switchCamera = () => {
|
|
cameraType.value =
|
|
cameraType.value === 'perspective' ? 'orthographic' : 'perspective'
|
|
}
|
|
</script>
|