From a9d4512398a6d4d984bd33a703cc6edfaf6de771 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sun, 10 Aug 2025 04:21:56 +0800
Subject: [PATCH] chore(stage-ui): allow to setup color picker

---
 .../Scenarios/Settings/ModelSettings/VRM.vue  | 31 +++++++++++++++----
 packages/stage-ui/src/stores/vrm.ts           | 14 ++++-----
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRM.vue b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRM.vue
index 7037e18d2..f3abcd5b2 100644
--- a/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRM.vue
+++ b/packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRM.vue
@@ -6,7 +6,7 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import { useVRM } from '../../../../stores'
-import { Container, PropertyNumber, PropertyPoint } from '../../../DataPane'
+import { Container, PropertyColor, PropertyNumber, PropertyPoint } from '../../../DataPane'
 import { Callout } from '../../../Layouts'
 import { Button } from '../../../Misc'
 import { ColorPalette } from '../../../Widgets'
@@ -41,11 +41,15 @@ const {
   directionalLightTarget,
   directionalLightRotation,
   directionalLightIntensity,
+  directionalLightColor,
 
   ambientLightIntensity,
+  ambientLightColor,
 
   hemisphereLightPosition,
   hemisphereLightIntensity,
+  hemisphereSkyColor,
+  hemisphereGroundColor,
 } = storeToRefs(vrm)
 
 const trackingOptions = computed(() => [
@@ -121,14 +125,13 @@ function handleUrlLoad() {
       />
 
       <!-- Set eye tracking mode -->
-      <span
-        class="col-span-2 col-start-1 row-start-6 self-center text-xs"
-      >
+      <div class="text-xs">
         {{ t('settings.vrm.scale-and-position.eye-tracking-mode.title') }}:
-      </span>
+      </div>
+      <div />
       <template v-for="option in trackingOptions" :key="option.value">
         <Button
-          :class="[option.class, 'row-start-6 w-auto']"
+          :class="[option.class, 'w-auto']"
           size="sm"
           :variant="trackingMode === option.value ? 'primary' : 'secondary'"
           :label="option.label"
@@ -163,6 +166,10 @@ function handleUrlLoad() {
         :y-config="{ step: 0.001, label: 'Y', formatValue: val => val?.toFixed(4) }"
         :z-config="{ step: 0.001, label: 'Z', formatValue: val => val?.toFixed(4) }"
       />
+      <PropertyColor
+        v-model="directionalLightColor"
+        label="Directional Light Color"
+      />
 
       <PropertyNumber
         v-model="directionalLightIntensity"
@@ -175,6 +182,10 @@ function handleUrlLoad() {
         :config="{ min: 0, max: 10, step: 0.01, label: 'Intensity' }"
         label="Ambient Light Intensity"
       />
+      <PropertyColor
+        v-model="ambientLightColor"
+        label="Ambient Light Color"
+      />
 
       <PropertyPoint
         v-model:x="hemisphereLightPosition.x"
@@ -190,6 +201,14 @@ function handleUrlLoad() {
         :config="{ min: 0, max: 10, step: 0.01, label: 'Intensity' }"
         label="Hemisphere Light Intensity"
       />
+      <PropertyColor
+        v-model="hemisphereSkyColor"
+        label="Hemisphere Sky Color"
+      />
+      <PropertyColor
+        v-model="hemisphereGroundColor"
+        label="Hemisphere Ground Color"
+      />
     </div>
   </Container>
   <Container
diff --git a/packages/stage-ui/src/stores/vrm.ts b/packages/stage-ui/src/stores/vrm.ts
index bc8cca259..0aa9489b6 100644
--- a/packages/stage-ui/src/stores/vrm.ts
+++ b/packages/stage-ui/src/stores/vrm.ts
@@ -46,16 +46,16 @@ export const useVRM = defineStore('vrm', () => {
   const directionalLightPosition = useLocalStorage('settings/vrm/scenes/scene/directional-light/position', { x: 1, y: 1, z: -10 })
   const directionalLightTarget = useLocalStorage('settings/vrm/scenes/scene/directional-light/target', { x: 0, y: 0, z: 0 })
   const directionalLightRotation = useLocalStorage('settings/vrm/scenes/scene/directional-light/rotation', { x: 0, y: 0, z: 0 })
-  const directionalLightIntensity = useLocalStorage('settings/vrm/scenes/scene/directional-light/intensity', 1.8)
-  const directionalLightColor = useLocalStorage('settings/vrm/scenes/scene/directional-light/color', 0xFFFFFF)
+  const directionalLightIntensity = useLocalStorage('settings/vrm/scenes/scene/directional-light/intensity', 0.6)
+  const directionalLightColor = useLocalStorage('settings/vrm/scenes/scene/directional-light/color', '#FFFFFF')
 
   const hemisphereLightPosition = useLocalStorage('settings/vrm/scenes/scene/hemisphere-light/position', { x: 0, y: 1, z: 0 })
-  const hemisphereSkyColor = useLocalStorage('settings/vrm/scenes/scene/hemisphere-light/sky-color', 0xFFFFFF)
-  const hemisphereGroundColor = useLocalStorage('settings/vrm/scenes/scene/hemisphere-light/ground-color', 0x000000)
-  const hemisphereLightIntensity = useLocalStorage('settings/vrm/scenes/scene/hemisphere-light/intensity', 1.0)
+  const hemisphereSkyColor = useLocalStorage('settings/vrm/scenes/scene/hemisphere-light/sky-color', '#FFFFFF')
+  const hemisphereGroundColor = useLocalStorage('settings/vrm/scenes/scene/hemisphere-light/ground-color', '#000000')
+  const hemisphereLightIntensity = useLocalStorage('settings/vrm/scenes/scene/hemisphere-light/intensity', 2.0)
 
-  const ambientLightIntensity = useLocalStorage('settings/vrm/scenes/scene/ambient-light/intensity', 2.3)
-  const ambientLightColor = useLocalStorage('settings/vrm/scenes/scene/ambient-light/color', 0xFFFFFF)
+  const ambientLightIntensity = useLocalStorage('settings/vrm/scenes/scene/ambient-light/intensity', 0.0)
+  const ambientLightColor = useLocalStorage('settings/vrm/scenes/scene/ambient-light/color', '#FFFFFF')
 
   const lookAtTarget = useLocalStorage('settings/vrm/lookAtTarget', { x: 0, y: 0, z: 0 })
   const isTracking = useLocalStorage('settings/vrm/isTracking', false)