nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

chore(stage-ui): allow to setup color picker

Browse Source
This commit is contained in:
Neko Ayaka
2025-08-10 04:21:56 +08:00
parent ead77056c0
commit a9d4512398
2 changed files with 32 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stage-ui/src/components/Scenarios/Settings/ModelSettings/VRM.vue
+25 -6
View File
@@ -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
packages/stage-ui/src/stores/vrm.ts
+7 -7
View File
@@ -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)