fix(stage-*): many live2d and vrm issues, default values were missing

apps/stage-web/src/pages/index.vue

@@ -10,17 +10,15 @@ import workletUrl from '@proj-airi/stage-ui/workers/vad/process.worklet?worker&u
 import { BackgroundProvider } from '@proj-airi/stage-layouts/components/Backgrounds'
 import { useBackgroundThemeColor } from '@proj-airi/stage-layouts/composables/theme-color'
 import { useBackgroundStore } from '@proj-airi/stage-layouts/stores/background'
-import { useSettingsLive2d } from '@proj-airi/stage-ui-live2d'
-import { useModelStore } from '@proj-airi/stage-ui-three'
 import { HoloCoupon } from '@proj-airi/stage-ui/components'
-import { WidgetStage } from '@proj-airi/stage-ui/components/scenes'
+import { ViewControlSlider, WidgetStage } from '@proj-airi/stage-ui/components/scenes'
 import { useAudioRecorder } from '@proj-airi/stage-ui/composables/audio/audio-recorder'
 import { useVAD } from '@proj-airi/stage-ui/stores/ai/models/vad'
 import { useChatOrchestratorStore } from '@proj-airi/stage-ui/stores/chat'
 import { useConsciousnessStore } from '@proj-airi/stage-ui/stores/modules/consciousness'
 import { useHearingSpeechInputPipeline } from '@proj-airi/stage-ui/stores/modules/hearing'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings'
+import { useSettings, useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings'
 import { breakpointsTailwind, useBreakpoints, useMouse } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
@@ -37,6 +35,7 @@ const isMobile = breakpoints.smaller('md')
 const backgroundStore = useBackgroundStore()
 const { selectedOption, sampledColor } = storeToRefs(backgroundStore)
 const backgroundSurface = useTemplateRef<InstanceType<typeof BackgroundProvider>>('backgroundSurface')
+const { stageModelRenderer } = storeToRefs(useSettings())
 
 const { syncBackgroundTheme } = useBackgroundThemeColor({ backgroundSurface, selectedOption, sampledColor })
 onMounted(() => syncBackgroundTheme())
@@ -149,14 +148,8 @@ watch([stream, () => vadLoaded.value], async ([s, loaded]) => {
   }
 })
 
-const { live2dEyeTrackingSource } = storeToRefs(useSettingsLive2d())
 const { x: mouseX, y: mouseY } = useMouse()
-live2dEyeTrackingSource.value = computed(() => ({
-  x: mouseX.value,
-  y: mouseY.value,
-}))
-const { trackingSource } = storeToRefs(useModelStore())
-trackingSource.value = computed(() => ({
+const cursorPosition = computed(() => ({
   x: mouseX.value,
   y: mouseY.value,
 }))
@@ -177,10 +170,22 @@ trackingSource.value = computed(() => ({
       </div>
       <!-- page -->
       <div relative flex="~ 1 row gap-y-0 gap-x-2 <md:col">
-        <WidgetStage
-          flex-1 min-w="1/2"
-          :paused="paused"
-        />
+        <div relative flex-1 min-w="1/2">
+          <div
+            absolute left-0 z-15 px-3
+            :class="[
+              stageModelRenderer === 'live2d' ? 'top-0 h-full py-[20vh]' : 'top-1/2 -translate-y-1/2',
+            ]"
+          >
+            <ViewControlSlider />
+          </div>
+          <WidgetStage
+            h-full w-full
+            :cursor-position="cursorPosition"
+            :enable-orbit-controls="!isMobile"
+            :paused="paused"
+          />
+        </div>
         <InteractiveArea v-if="!isMobile" h="85dvh" absolute right-4 flex flex-1 flex-col max-w="500px" min-w="30%" />
         <MobileInteractiveArea v-if="isMobile" @settings-open="handleSettingsOpen" />
       </div>