diff --git a/apps/stage-web/src/components/Layouts/ViewControls/Inputs.vue b/apps/stage-web/src/components/Layouts/ViewControls/Inputs.vue index 89d9fb5a5..643c9fc38 100644 --- a/apps/stage-web/src/components/Layouts/ViewControls/Inputs.vue +++ b/apps/stage-web/src/components/Layouts/ViewControls/Inputs.vue @@ -9,7 +9,7 @@ const props = defineProps<{ }>() const { stageView, stageViewControlsEnabled } = storeToRefs(useSettings()) -const { scale: vrmScale, position: vrmPosition, modelSize: vrmModelSize } = storeToRefs(useVRM()) +const { scale: vrmScale, cameraPosition: vrmPosition, modelSize: vrmModelSize } = storeToRefs(useVRM()) const { scale: live2dScale, position: live2dPosition } = storeToRefs(useLive2d()) const viewControlsValueX = computed({ diff --git a/packages/stage-ui/src/components/Scenes/VRM.vue b/packages/stage-ui/src/components/Scenes/VRM.vue index 6e715eab9..47dd2da60 100644 --- a/packages/stage-ui/src/components/Scenes/VRM.vue +++ b/packages/stage-ui/src/components/Scenes/VRM.vue @@ -18,7 +18,7 @@ const { width, height } = useElementBounding(vrmContainerRef) const { selectedModel, cameraFOV, - initialCameraPosition, + cameraPosition, cameraDistance, modelOrigin, } = storeToRefs(useVRM()) @@ -33,9 +33,9 @@ onMounted(() => { camera.value.aspect = width.value / height.value camera.value.fov = cameraFOV.value camera.value.position.set( - initialCameraPosition.value.x, - initialCameraPosition.value.y, - initialCameraPosition.value.z, + cameraPosition.value.x, + cameraPosition.value.y, + cameraPosition.value.z, ) camera.value.updateProjectionMatrix() } @@ -59,9 +59,9 @@ function handleLoadModelProgress(val: number) { if (val === 100 && camera.value && controlsRef.value && controlsRef.value.controls) { // Set camera pos camera.value.position.set( - initialCameraPosition.value.x, - initialCameraPosition.value.y, - initialCameraPosition.value.z, + cameraPosition.value.x, + cameraPosition.value.y, + cameraPosition.value.z, ) camera.value.updateProjectionMatrix() @@ -82,7 +82,7 @@ watch(() => controlsRef.value?.getDistance(), (newDistance) => { // we can check if the distance has changed significantly. if (Math.abs(cameraDistance.value - newDistance) > 1e-6) { cameraDistance.value = newDistance - initialCameraPosition.value = { + cameraPosition.value = { x: camera.value.position.x, y: camera.value.position.y, z: camera.value.position.z, @@ -102,7 +102,7 @@ watch(cameraDistance, (newDistance) => { newPosition.z, ) controlsRef.value.update() - initialCameraPosition.value = { + cameraPosition.value = { x: newPosition.x, y: newPosition.y, z: newPosition.z, diff --git a/packages/stage-ui/src/components/Scenes/VRM/Model.vue b/packages/stage-ui/src/components/Scenes/VRM/Model.vue index 451dea0ef..1d0c18d2a 100644 --- a/packages/stage-ui/src/components/Scenes/VRM/Model.vue +++ b/packages/stage-ui/src/components/Scenes/VRM/Model.vue @@ -40,7 +40,7 @@ const { modelOffset, modelOrigin, modelSize, - initialCameraPosition, + cameraPosition, loadingModel, modelRotationY, } = storeToRefs(vrmStore) @@ -73,7 +73,7 @@ onMounted(async () => { vrmGroup.value = _vrmGroup // Set initial camera position - initialCameraPosition.value = { + cameraPosition.value = { x: vrmModelCenter.x + vrmInitialCameraOffset.x, y: vrmModelCenter.y + vrmInitialCameraOffset.y, z: vrmModelCenter.z + vrmInitialCameraOffset.z, diff --git a/packages/stage-ui/src/stores/vrm.ts b/packages/stage-ui/src/stores/vrm.ts index 091c7a5c7..b19c8cc06 100644 --- a/packages/stage-ui/src/stores/vrm.ts +++ b/packages/stage-ui/src/stores/vrm.ts @@ -17,7 +17,7 @@ export const useVRM = defineStore('vrm', () => { const modelOffset = useLocalStorage('settings/vrm/modelOffset', { x: 0, y: 0, z: 0 }) const cameraFOV = useLocalStorage('settings/vrm/cameraFOV', 40) - const initialCameraPosition = useLocalStorage('settings/vrm/initialCameraPosition', { x: 0, y: 0, z: -1 }) + const cameraPosition = useLocalStorage('settings/vrm/camera-position', { x: 0, y: 0, z: -1 }) const modelObjectUrl = ref() const modelRotationY = useLocalStorage('settings/vrm/modelRotationY', 0) @@ -57,7 +57,7 @@ export const useVRM = defineStore('vrm', () => { modelOffset, selectedModel, cameraFOV, - initialCameraPosition, + cameraPosition, modelRotationY, cameraDistance, }