fix(stage-ui): live2d mouse tracking not worked as expected

This commit is contained in:
Makito
2025-08-24 17:38:30 +09:00
parent 4a6befddd5
commit 9c9d6c18d1
2 changed files with 15 additions and 4 deletions
@@ -1,4 +1,5 @@
<script setup lang="ts">
import { useMouse } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import Live2DScene from '../../../Scenes/Live2D.vue'
@@ -22,7 +23,9 @@ defineEmits<{
(e: 'extractColorsFromModel'): void
}>()
const { stageView } = storeToRefs(useSettings())
const positionCursor = useMouse()
const { stageView, live2dDisableFocus } = storeToRefs(useSettings())
const { modelFile: live2dModelFile, modelUrl: live2dModelUrl } = storeToRefs(useLive2d())
const { modelFile: vrmModelFile, modelUrl: vrmModelUrl } = storeToRefs(useVRM())
</script>
@@ -37,7 +40,15 @@ const { modelFile: vrmModelFile, modelUrl: vrmModelUrl } = storeToRefs(useVRM())
: []),
]"
>
<Live2DScene :model-src="live2dModelUrl" :model-file="live2dModelFile" />
<Live2DScene
:focus-at="{
x: positionCursor.x.value,
y: positionCursor.y.value,
}"
:model-src="live2dModelUrl"
:model-file="live2dModelFile"
:disable-focus-at="live2dDisableFocus"
/>
</div>
<div
flex="~ col gap-2" :class="[
@@ -1,7 +1,6 @@
<script setup lang="ts">
import { Application } from '@pixi/app'
import { extensions } from '@pixi/extensions'
import { InteractionManager } from '@pixi/interaction'
import { Ticker, TickerPlugin } from '@pixi/ticker'
import { Live2DModel } from 'pixi-live2d-display/cubism4'
import { onMounted, onUnmounted, ref, watch } from 'vue'
@@ -25,7 +24,8 @@ async function initLive2DPixiStage(parent: HTMLDivElement) {
// https://guansss.github.io/pixi-live2d-display/#package-importing
Live2DModel.registerTicker(Ticker)
extensions.add(TickerPlugin)
extensions.add(InteractionManager)
// We handle the interactions (e.g., mouse-based focusing at) manually
// extensions.add(InteractionManager)
pixiApp.value = new Application({
width: props.width * props.resolution,