wip

locales/ja-JP.yml

@@ -3580,3 +3580,5 @@ _miRoom:
   imageFit_cover: "覆う"
   imageFit_contain: "収める"
   imageFit_stretch: "引き伸ばす"
+  material_metallic: "光沢"
+  material_roughness: "粗さ"

packages/frontend/src/pages/rooms/room.object-customize-form.vue

@@ -12,6 +12,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
 				<MkInput :modelValue="getHex(options[k])" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) emit('update', k, c); }"></MkInput>
 			</div>
+			<div v-else-if="s.type === 'material'" class="_gaps_s">
+				<!-- debounce or throttleしないとカラーピッカー上で高速でなぞったときになぜか無限ループになる。ワーカーとの間でラグがあるため、少し前の値がまたmodelValueとしてフィードバックされてしまうためだと思われる -->
+				<MkInput :modelValue="getHex(options[k].color)" type="color" :throttle="300" @update:modelValue="v => { const c = getRgb(v); if (c != null) updateMaterialColor(k, c); }">
+					<template #label>{{ i18n.ts.color }}</template>
+				</MkInput>
+				<MkRange :continuousUpdate="true" :min="0" :max="1" :step="0.1" :modelValue="options[k].metallic" @update:modelValue="v => updateMaterialMetallic(k, v)">
+					<template #label>{{ i18n.ts._miRoom.material_metallic }}</template>
+				</MkRange>
+				<MkRange :continuousUpdate="true" :min="0" :max="1" :step="0.1" :modelValue="options[k].roughness" @update:modelValue="v => updateMaterialRoughness(k, v)">
+					<template #label>{{ i18n.ts._miRoom.material_roughness }}</template>
+				</MkRange>
+			</div>
 			<div v-else-if="s.type === 'boolean'">
 				<MkSwitch :modelValue="options[k]" @update:modelValue="v => emit('update', k, v)"></MkSwitch>
 			</div>
@@ -109,6 +121,18 @@ function clearImage(k: string) {
 function changeImageFit(k: string, fit: string) {
 	emit('update', k, { ...props.options[k], fit });
 }
+
+function updateMaterialColor(k: string, color: { r: number; g: number; b: number }) {
+	emit('update', k, { ...props.options[k], color });
+}
+
+function updateMaterialMetallic(k: string, metallic: number) {
+	emit('update', k, { ...props.options[k], metallic });
+}
+
+function updateMaterialRoughness(k: string, roughness: number) {
+	emit('update', k, { ...props.options[k], roughness });
+}
 </script>
 
 <style lang="scss" module>

packages/frontend/src/world/room/object.ts

@@ -93,7 +93,7 @@ type SeedOptionSchema = {
 	label: string;
 };
 
-type OptionsSchema = Record<string, NumberOptionSchema | BooleanOptionSchema | StringOptionSchema | ColorOptionSchema | EnumOptionSchema | RangeOptionSchema | ImageOptionSchema | SeedOptionSchema>;
+type OptionsSchema = Record<string, NumberOptionSchema | BooleanOptionSchema | StringOptionSchema | ColorOptionSchema | MaterialOptionSchema | EnumOptionSchema | RangeOptionSchema | ImageOptionSchema | SeedOptionSchema>;
 
 export type RawOptions = Record<string, unknown> & {
 	readonly __brand: unique symbol;

packages/frontend/src/world/room/objects/woodRingFloorLamp.ts

@@ -13,13 +13,13 @@ export const woodRingFloorLamp = defineObject({
 	name: 'Wood Ring Floor Lamp',
 	options: {
 		schema: {
-			shadeColor: {
-				type: 'color',
-				label: 'Shade color',
+			shadeMat: {
+				type: 'material',
+				label: 'Shade material',
 			},
-			bodyColor: {
-				type: 'color',
-				label: 'Body color',
+			bodyMat: {
+				type: 'material',
+				label: 'Body material',
 			},
 			lightColor: {
 				type: 'color',
@@ -34,8 +34,8 @@ export const woodRingFloorLamp = defineObject({
 			},
 		},
 		default: {
-			shadeColor: [0.21, 0.04, 0],
-			bodyColor: [0.05, 0.05, 0.05],
+			shadeMat: { color: [0.21, 0.04, 0], metallic: 0, roughness: 0.5 },
+			bodyMat: { color: [0.05, 0.05, 0.05], metallic: 1, roughness: 0.5 },
 			lightColor: [1, 0.5, 0.2],
 			lightBrightness: 0.5,
 		},
@@ -46,8 +46,9 @@ export const woodRingFloorLamp = defineObject({
 		const shadeMaterial = model.findMaterial('__X_SHADE__');
 
 		const applyShadeColor = () => {
-			const [r, g, b] = options.shadeColor;
-			shadeMaterial.albedoColor = new BABYLON.Color3(r, g, b);
+			shadeMaterial.albedoColor = new BABYLON.Color3(options.shadeMat.color[0], options.shadeMat.color[1], options.shadeMat.color[2]);
+			shadeMaterial.metallic = options.shadeMat.metallic;
+			shadeMaterial.roughness = options.shadeMat.roughness;
 		};
 
 		applyShadeColor();
@@ -55,8 +56,9 @@ export const woodRingFloorLamp = defineObject({
 		const bodyMaterial = model.findMaterial('__X_BODY__');
 
 		const applyBodyColor = () => {
-			const [r, g, b] = options.bodyColor;
-			bodyMaterial.albedoColor = new BABYLON.Color3(r, g, b);
+			bodyMaterial.albedoColor = new BABYLON.Color3(options.bodyMat.color[0], options.bodyMat.color[1], options.bodyMat.color[2]);
+			bodyMaterial.metallic = options.bodyMat.metallic;
+			bodyMaterial.roughness = options.bodyMat.roughness;
 		};
 
 		applyBodyColor();

packages/i18n/src/autogen/locale.ts

@@ -13358,5 +13358,13 @@ export interface Locale extends ILocale {
          * 引き伸ばす
          */
         "imageFit_stretch": string;
+        /**
+         * 光沢
+         */
+        "material_metallic": string;
+        /**
+         * 粗さ
+         */
+        "material_roughness": string;
     };
 }