wip

packages/frontend/src/pages/room.vue

@@ -98,6 +98,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<MkInput :modelValue="getHex(controller.roomState.value.heya.options.wallN.color)" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallN: { ...controller.roomState.value.heya.options.wallN, color: c } }); }">
 							<template #label>color</template>
 						</MkInput>
+						<hr>
+						<MkSwitch :modelValue="controller.roomState.value.heya.options.wallN.withHari" @update:modelValue="v => { controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallN: { ...controller.roomState.value.heya.options.wallN, withHari: v } }); }">
+							<template #label>with Hari</template>
+						</MkSwitch>
+						<MkSelect
+							:items="[
+								{ label: 'None', value: null },
+								{ label: 'Wood', value: 'wood' },
+								{ label: 'Concrete', value: 'concrete' },
+							]" :modelValue="controller.roomState.value.heya.options.wallN.hariMaterial" @update:modelValue="v => { controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallN: { ...controller.roomState.value.heya.options.wallN, hariMaterial: v } }); }"
+						>
+							<template #label>hari material</template>
+						</MkSelect>
+						<MkInput :modelValue="getHex(controller.roomState.value.heya.options.wallN.hariColor)" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallN: { ...controller.roomState.value.heya.options.wallN, hariColor: c } }); }">
+							<template #label>hari color</template>
+						</MkInput>
+						<hr>
+						<MkSwitch :modelValue="controller.roomState.value.heya.options.wallN.withHabaki" @update:modelValue="v => { controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallN: { ...controller.roomState.value.heya.options.wallN, withHabaki: v } }); }">
+							<template #label>with Habaki</template>
+						</MkSwitch>
 					</div>
 					<div>
 						<div>Wall E</div>
@@ -113,6 +133,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<MkInput :modelValue="getHex(controller.roomState.value.heya.options.wallE.color)" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallE: { ...controller.roomState.value.heya.options.wallE, color: c } }); }">
 							<template #label>color</template>
 						</MkInput>
+						<hr>
+						<MkSwitch :modelValue="controller.roomState.value.heya.options.wallE.withHari" @update:modelValue="v => { controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallE: { ...controller.roomState.value.heya.options.wallE, withHari: v } }); }">
+							<template #label>with Hari</template>
+						</MkSwitch>
+						<MkSelect
+							:items="[
+								{ label: 'None', value: null },
+								{ label: 'Wood', value: 'wood' },
+								{ label: 'Concrete', value: 'concrete' },
+							]" :modelValue="controller.roomState.value.heya.options.wallE.hariMaterial" @update:modelValue="v => { controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallE: { ...controller.roomState.value.heya.options.wallE, hariMaterial: v } }); }"
+						>
+							<template #label>hari material</template>
+						</MkSelect>
+						<MkInput :modelValue="getHex(controller.roomState.value.heya.options.wallE.hariColor)" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallE: { ...controller.roomState.value.heya.options.wallE, hariColor: c } }); }">
+							<template #label>hari color</template>
+						</MkInput>
+						<hr>
+						<MkSwitch :modelValue="controller.roomState.value.heya.options.wallE.withHabaki" @update:modelValue="v => { controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallE: { ...controller.roomState.value.heya.options.wallE, withHabaki: v } }); }">
+							<template #label>with Habaki</template>
+						</MkSwitch>
 					</div>
 					<div>
 						<div>Wall S</div>
@@ -128,6 +168,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<MkInput :modelValue="getHex(controller.roomState.value.heya.options.wallS.color)" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallS: { ...controller.roomState.value.heya.options.wallS, color: c } }); }">
 							<template #label>color</template>
 						</MkInput>
+						<hr>
+						<MkSwitch :modelValue="controller.roomState.value.heya.options.wallS.withHari" @update:modelValue="v => { controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallS: { ...controller.roomState.value.heya.options.wallS, withHari: v } }); }">
+							<template #label>with Hari</template>
+						</MkSwitch>
+						<MkSelect
+							:items="[
+								{ label: 'None', value: null },
+								{ label: 'Wood', value: 'wood' },
+								{ label: 'Concrete', value: 'concrete' },
+							]" :modelValue="controller.roomState.value.heya.options.wallS.hariMaterial" @update:modelValue="v => { controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallS: { ...controller.roomState.value.heya.options.wallS, hariMaterial: v } }); }"
+						>
+							<template #label>hari material</template>
+						</MkSelect>
+						<MkInput :modelValue="getHex(controller.roomState.value.heya.options.wallS.hariColor)" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallS: { ...controller.roomState.value.heya.options.wallS, hariColor: c } }); }">
+							<template #label>hari color</template>
+						</MkInput>
+						<hr>
+						<MkSwitch :modelValue="controller.roomState.value.heya.options.wallS.withHabaki" @update:modelValue="v => { controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallS: { ...controller.roomState.value.heya.options.wallS, withHabaki: v } }); }">
+							<template #label>with Habaki</template>
+						</MkSwitch>
 					</div>
 					<div>
 						<div>Wall W</div>
@@ -143,6 +203,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<MkInput :modelValue="getHex(controller.roomState.value.heya.options.wallW.color)" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallW: { ...controller.roomState.value.heya.options.wallW, color: c } }); }">
 							<template #label>color</template>
 						</MkInput>
+						<hr>
+						<MkSwitch :modelValue="controller.roomState.value.heya.options.wallW.withHari" @update:modelValue="v => { controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallW: { ...controller.roomState.value.heya.options.wallW, withHari: v } }); }">
+							<template #label>with Hari</template>
+						</MkSwitch>
+						<MkSelect
+							:items="[
+								{ label: 'None', value: null },
+								{ label: 'Wood', value: 'wood' },
+								{ label: 'Concrete', value: 'concrete' },
+							]" :modelValue="controller.roomState.value.heya.options.wallW.hariMaterial" @update:modelValue="v => { controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallW: { ...controller.roomState.value.heya.options.wallW, hariMaterial: v } }); }"
+						>
+							<template #label>hari material</template>
+						</MkSelect>
+						<MkInput :modelValue="getHex(controller.roomState.value.heya.options.wallW.hariColor)" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallW: { ...controller.roomState.value.heya.options.wallW, hariColor: c } }); }">
+							<template #label>hari color</template>
+						</MkInput>
+						<hr>
+						<MkSwitch :modelValue="controller.roomState.value.heya.options.wallW.withHabaki" @update:modelValue="v => { controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallW: { ...controller.roomState.value.heya.options.wallW, withHabaki: v } }); }">
+							<template #label>with Habaki</template>
+						</MkSwitch>
 					</div>
 				</template>
 			</div>
@@ -260,6 +340,12 @@ const data = localStorage.getItem('roomData') != null ? JSON.parse(localStorage.
 	installedObjects: [],
 };
 
+// 後方互換性のため
+if (data.heya.options.wallE.hariColor == null) data.heya.options.wallE.hariColor = [0.8, 0.8, 0.8];
+if (data.heya.options.wallN.hariColor == null) data.heya.options.wallN.hariColor = [0.8, 0.8, 0.8];
+if (data.heya.options.wallS.hariColor == null) data.heya.options.wallS.hariColor = [0.8, 0.8, 0.8];
+if (data.heya.options.wallW.hariColor == null) data.heya.options.wallW.hariColor = [0.8, 0.8, 0.8];
+
 let latestData = deepClone(data);
 
 const roomControllerOptions = computed<RoomControllerOptions>(() => ({
@@ -754,6 +840,9 @@ definePage(() => ({
 	padding: 16px;
 	box-sizing: border-box;
 	width: 300px;
+	max-height: 100%;
+	box-sizing: border-box;
+	overflow: auto;
 }
 
 .loading {

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

@@ -29,6 +29,10 @@ export abstract class HeyaManager<T = any> {
 type SimpleHeyaWallBase = {
 	material: null | 'wood' | 'concrete';
 	color: [number, number, number];
+	withHari: boolean;
+	hariMaterial: null | 'wood' | 'concrete';
+	hariColor: [number, number, number];
+	withHabaki: boolean;
 };
 
 export type SimpleHeyaOptions = {
@@ -63,6 +67,10 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
 	private wallSMaterial: BABYLON.PBRMaterial | null = null;
 	private wallWMaterial: BABYLON.PBRMaterial | null = null;
 	private wallEMaterial: BABYLON.PBRMaterial | null = null;
+	private wallNHariMaterial: BABYLON.PBRMaterial | null = null;
+	private wallSHariMaterial: BABYLON.PBRMaterial | null = null;
+	private wallWHariMaterial: BABYLON.PBRMaterial | null = null;
+	private wallEHariMaterial: BABYLON.PBRMaterial | null = null;
 
 	constructor(onMeshUpdatedCallback?: ((meshes: BABYLON.AbstractMesh[]) => void) | null) {
 		super(onMeshUpdatedCallback);
@@ -120,18 +128,53 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
 			m.material = this.wallEMaterial;
 		}
 
+		const hariMaterial = findMaterial(this.meshes[0], '__X_HARI__');
+		this.wallNHariMaterial = hariMaterial.clone('wallNHariMaterial');
+		this.wallSHariMaterial = hariMaterial.clone('wallSHariMaterial');
+		this.wallWHariMaterial = hariMaterial.clone('wallWHariMaterial');
+		this.wallEHariMaterial = hariMaterial.clone('wallEHariMaterial');
+
+		for (const m of this.wallNRoot.getChildMeshes().filter(m => m.material === hariMaterial)) {
+			m.material = this.wallNHariMaterial;
+		}
+		for (const m of this.wallSRoot.getChildMeshes().filter(m => m.material === hariMaterial)) {
+			m.material = this.wallSHariMaterial;
+		}
+		for (const m of this.wallWRoot.getChildMeshes().filter(m => m.material === hariMaterial)) {
+			m.material = this.wallWHariMaterial;
+		}
+		for (const m of this.wallERoot.getChildMeshes().filter(m => m.material === hariMaterial)) {
+			m.material = this.wallEHariMaterial;
+		}
+
 		await this.applyOptions(options);
 	}
 
 	public applyOptions(options: SimpleHeyaOptions) {
 		// TODO: 返り値をpromiseにしてちゃんとテクスチャが読み終わってからresolveする
 
-		const apply = (wall: 'N' | 'S' | 'W' | 'E') => {
+		const applyWall = (wall: 'N' | 'S' | 'W' | 'E') => {
+			const wallRoot =
+				wall === 'N' ? this.wallNRoot :
+				wall === 'S' ? this.wallSRoot :
+				wall === 'W' ? this.wallWRoot :
+				this.wallERoot;
+
 			const wallOptions =
 				wall === 'N' ? options.wallN :
 				wall === 'S' ? options.wallS :
 				wall === 'W' ? options.wallW :
 				options.wallE;
+
+			for (const mesh of wallRoot.getChildMeshes()) {
+				if (mesh.name.includes('__X_HARI__')) {
+					mesh.isVisible = wallOptions.withHari;
+				} else if (mesh.name.includes('__X_HABAKI__')) {
+					mesh.isVisible = wallOptions.withHabaki;
+				}
+			}
+
+			{
 				const targetMaterial =
 					wall === 'N' ? this.wallNMaterial :
 					wall === 'S' ? this.wallSMaterial :
@@ -139,7 +182,6 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
 					this.wallEMaterial;
 
 				targetMaterial.unfreeze();
-
 				targetMaterial.albedoColor = new BABYLON.Color3(...wallOptions.color);
 
 				const texPath = wallOptions.material === 'wood' ? '/client-assets/room/wall-textures/wood.png'
@@ -154,12 +196,37 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
 				}
 
 				targetMaterial.freeze();
+			}
+
+			{
+				const targetMaterial =
+					wall === 'N' ? this.wallNHariMaterial :
+					wall === 'S' ? this.wallSHariMaterial :
+					wall === 'W' ? this.wallWHariMaterial :
+					this.wallEHariMaterial;
+
+				targetMaterial.unfreeze();
+				targetMaterial.albedoColor = new BABYLON.Color3(...wallOptions.hariColor);
+
+				const texPath = wallOptions.hariMaterial === 'wood' ? '/client-assets/room/wall-textures/wood.png'
+					: wallOptions.hariMaterial === 'concrete' ? '/client-assets/room/wall-textures/concrete.png'
+					: null;
+
+				if (texPath != null) {
+					const tex = new BABYLON.Texture(texPath, this.meshes[0].getScene(), false, false);
+					targetMaterial.albedoTexture = tex;
+				} else {
+					targetMaterial.albedoTexture = null;
+				}
+
+				targetMaterial.freeze();
+			}
 		};
 
-		apply('N');
+		applyWall('N');
-		apply('S');
+		applyWall('S');
-		apply('W');
+		applyWall('W');
-		apply('E');
+		applyWall('E');
 
 		this.onMeshUpdatedCallback?.(this.meshes);
 	}