wip

packages/frontend/src/pages/room.default-heya-options.vue

@@ -10,18 +10,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<template #label>Wall N</template>
 			<XWallOption :options="options.walls.n" @update="v => { update({ walls: { ...options.walls, n: v } }); }"></XWallOption>
 		</MkFolder>
+
 		<MkFolder>
 			<template #label>Wall S</template>
 			<XWallOption :options="options.walls.s" @update="v => { update({ walls: { ...options.walls, s: v } }); }"></XWallOption>
 		</MkFolder>
+
 		<MkFolder>
 			<template #label>Wall W</template>
 			<XWallOption :options="options.walls.w" @update="v => { update({ walls: { ...options.walls, w: v } }); }"></XWallOption>
 		</MkFolder>
+
 		<MkFolder>
 			<template #label>Wall E</template>
 			<XWallOption :options="options.walls.e" @update="v => { update({ walls: { ...options.walls, e: v } }); }"></XWallOption>
 		</MkFolder>
+
 		<MkFolder>
 			<template #label>Ceiling</template>
 			<MkSelect
@@ -37,6 +41,22 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #label>color</template>
 			</MkInput>
 		</MkFolder>
+
+		<MkFolder>
+			<template #label>Flooring</template>
+			<MkSelect
+				:items="[
+					{ label: 'None', value: null },
+					{ label: 'Wood', value: 'wood' },
+					{ label: 'Concrete', value: 'concrete' },
+				]" :modelValue="options.flooring.material" @update:modelValue="v => { update({ flooring: { ...options.flooring, material: v } }); }"
+			>
+				<template #label>material</template>
+			</MkSelect>
+			<MkInput :modelValue="getHex(options.flooring.color)" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ flooring: { ...options.flooring, color: c } }); }">
+				<template #label>color</template>
+			</MkInput>
+		</MkFolder>
 	</div>
 </div>
 </template>

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

@@ -80,6 +80,7 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
 		e: BABYLON.PBRMaterial;
 	} | null = null;
 	private ceilingMaterial: BABYLON.PBRMaterial | null = null;
+	private floorMaterial: BABYLON.PBRMaterial | null = null;
 
 	constructor(onMeshUpdatedCallback?: ((meshes: BABYLON.AbstractMesh[]) => void) | null) {
 		super(onMeshUpdatedCallback);
@@ -146,6 +147,7 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
 		}
 
 		this.ceilingMaterial = findMaterial(this.meshes[0], '__X_CEILING__');
+		this.floorMaterial = findMaterial(this.meshes[0], '__X_FLOOR__');
 
 		await this.applyOptions(options);
 	}
@@ -171,8 +173,8 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
 				targetMaterial.unfreeze();
 				targetMaterial.albedoColor = new BABYLON.Color3(...wallOptions.color);
 
-				const texPath = wallOptions.material === 'wood' ? '/client-assets/room/wall-textures/wood.png'
+				const texPath = wallOptions.material === 'wood' ? '/client-assets/room/textures/wall-wood.png'
-					: wallOptions.material === 'concrete' ? '/client-assets/room/wall-textures/concrete.png'
+					: wallOptions.material === 'concrete' ? '/client-assets/room/textures/wall-concrete.png'
 					: null;
 
 				if (texPath != null) {
@@ -191,8 +193,8 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
 				targetMaterial.unfreeze();
 				targetMaterial.albedoColor = new BABYLON.Color3(...wallOptions.hariColor);
 
-				const texPath = wallOptions.hariMaterial === 'wood' ? '/client-assets/room/wall-textures/wood.png'
+				const texPath = wallOptions.hariMaterial === 'wood' ? '/client-assets/room/textures/wall-wood.png'
-					: wallOptions.hariMaterial === 'concrete' ? '/client-assets/room/wall-textures/concrete.png'
+					: wallOptions.hariMaterial === 'concrete' ? '/client-assets/room/textures/wall-concrete.png'
 					: null;
 
 				if (texPath != null) {
@@ -210,8 +212,8 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
 			this.ceilingMaterial.unfreeze();
 			this.ceilingMaterial.albedoColor = new BABYLON.Color3(...options.ceiling.color);
 
-			const texPath = options.ceiling.material === 'wood' ? '/client-assets/room/wall-textures/wood.png'
+			const texPath = options.ceiling.material === 'wood' ? '/client-assets/room/textures/ceiling-wood.png'
-				: options.ceiling.material === 'concrete' ? '/client-assets/room/wall-textures/concrete.png'
+				: options.ceiling.material === 'concrete' ? '/client-assets/room/textures/ceiling-concrete.png'
 				: null;
 
 			if (texPath != null) {
@@ -224,6 +226,24 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
 			this.ceilingMaterial.freeze();
 		}
 
+		{
+			this.floorMaterial.unfreeze();
+			this.floorMaterial.albedoColor = new BABYLON.Color3(...options.flooring.color);
+
+			const texPath = options.flooring.material === 'wood' ? '/client-assets/room/textures/flooring-wood.png'
+				: options.flooring.material === 'concrete' ? '/client-assets/room/textures/flooring-concrete.png'
+				: null;
+
+			if (texPath != null) {
+				const tex = new BABYLON.Texture(texPath, this.meshes[0].getScene(), false, false);
+				this.floorMaterial.albedoTexture = tex;
+			} else {
+				this.floorMaterial.albedoTexture = null;
+			}
+
+			this.floorMaterial.freeze();
+		}
+
 		this.onMeshUpdatedCallback?.(this.meshes);
 	}