diff --git a/packages/frontend/assets/room/rooms/default/300.glb b/packages/frontend/assets/room/rooms/default/300.glb
index 3e04c286d1..ba3cf1f977 100644
Binary files a/packages/frontend/assets/room/rooms/default/300.glb and b/packages/frontend/assets/room/rooms/default/300.glb differ
diff --git a/packages/frontend/assets/room/rooms/default/default.blend b/packages/frontend/assets/room/rooms/default/default.blend
index 31b31eab26..d23ae2fdb2 100644
Binary files a/packages/frontend/assets/room/rooms/default/default.blend and b/packages/frontend/assets/room/rooms/default/default.blend differ
diff --git a/packages/frontend/assets/room/wall-textures/concrete.png b/packages/frontend/assets/room/wall-textures/concrete.png
new file mode 100644
index 0000000000..375acdffa0
Binary files /dev/null and b/packages/frontend/assets/room/wall-textures/concrete.png differ
diff --git a/packages/frontend/src/pages/room.vue b/packages/frontend/src/pages/room.vue
index e2bbaa8d95..8fa9224fbe 100644
--- a/packages/frontend/src/pages/room.vue
+++ b/packages/frontend/src/pages/room.vue
@@ -61,16 +61,64 @@ SPDX-License-Identifier: AGPL-3.0-only
-
Wall N color
-
{ const c = getRgb(v); if (c != null) controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallN: { ...controller.roomState.value.heya.options.wallN, color: c } }); }">
+
Wall N
+
{ controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallN: { ...controller.roomState.value.heya.options.wallN, material: v } }); }"
+ >
+ wallpaper
+
+
{ const c = getRgb(v); if (c != null) controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallN: { ...controller.roomState.value.heya.options.wallN, color: c } }); }">
+ color
+
-
Wall E color
-
{ const c = getRgb(v); if (c != null) controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallE: { ...controller.roomState.value.heya.options.wallE, color: c } }); }">
+
Wall E
+
{ controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallE: { ...controller.roomState.value.heya.options.wallE, material: v } }); }"
+ >
+ wallpaper
+
+
{ const c = getRgb(v); if (c != null) controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallE: { ...controller.roomState.value.heya.options.wallE, color: c } }); }">
+ color
+
-
Wall W color
-
{ const c = getRgb(v); if (c != null) controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallW: { ...controller.roomState.value.heya.options.wallW, color: c } }); }">
+
Wall S
+
{ controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallS: { ...controller.roomState.value.heya.options.wallS, material: v } }); }"
+ >
+ wallpaper
+
+
{ const c = getRgb(v); if (c != null) controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallS: { ...controller.roomState.value.heya.options.wallS, color: c } }); }">
+ color
+
+
+
+
Wall W
+
{ controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallW: { ...controller.roomState.value.heya.options.wallW, material: v } }); }"
+ >
+ wallpaper
+
+
{ const c = getRgb(v); if (c != null) controller.updateHeyaOptions({ ...controller.roomState.value.heya.options, wallW: { ...controller.roomState.value.heya.options.wallW, color: c } }); }">
+ color
+
diff --git a/packages/frontend/src/world/room/engine.ts b/packages/frontend/src/world/room/engine.ts
index 765c5ea47b..f1694be47d 100644
--- a/packages/frontend/src/world/room/engine.ts
+++ b/packages/frontend/src/world/room/engine.ts
@@ -455,7 +455,8 @@ export class RoomEngine extends EventEmitter {
this.emit('loadingProgress', { progress: loadedCount / objects.length });
})));
- this.scene.blockMaterialDirtyMechanism = true;
+ // 不具合のもと
+ //this.scene.blockMaterialDirtyMechanism = true;
if (SNAPSHOT_RENDERING) {
// 早く有効にしすぎることが原因かは不明だがクラッシュすることがあるので遅らせてみる
diff --git a/packages/frontend/src/world/room/heya.ts b/packages/frontend/src/world/room/heya.ts
index ae620e5d92..b599739065 100644
--- a/packages/frontend/src/world/room/heya.ts
+++ b/packages/frontend/src/world/room/heya.ts
@@ -59,10 +59,10 @@ export class SimpleHeyaManager extends HeyaManager {
private wallSRoot: BABYLON.TransformNode | null = null;
private wallWRoot: BABYLON.TransformNode | null = null;
private wallERoot: BABYLON.TransformNode | null = null;
- private wallNMaterial: BABYLON.Material | null = null;
- private wallSMaterial: BABYLON.Material | null = null;
- private wallWMaterial: BABYLON.Material | null = null;
- private wallEMaterial: BABYLON.Material | null = null;
+ private wallNMaterial: BABYLON.PBRMaterial | null = null;
+ private wallSMaterial: BABYLON.PBRMaterial | null = null;
+ private wallWMaterial: BABYLON.PBRMaterial | null = null;
+ private wallEMaterial: BABYLON.PBRMaterial | null = null;
constructor(onMeshUpdatedCallback?: ((meshes: BABYLON.AbstractMesh[]) => void) | null) {
super(onMeshUpdatedCallback);
@@ -120,14 +120,46 @@ export class SimpleHeyaManager extends HeyaManager {
m.material = this.wallEMaterial;
}
- this.applyOptions(options);
+ await this.applyOptions(options);
}
public applyOptions(options: SimpleHeyaOptions) {
- this.wallNMaterial.albedoColor = new BABYLON.Color3(...options.wallN.color);
- this.wallSMaterial.albedoColor = new BABYLON.Color3(...options.wallS.color);
- this.wallWMaterial.albedoColor = new BABYLON.Color3(...options.wallW.color);
- this.wallEMaterial.albedoColor = new BABYLON.Color3(...options.wallE.color);
+ // TODO: 返り値をpromiseにしてちゃんとテクスチャが読み終わってからresolveする
+
+ const apply = (wall: 'N' | 'S' | 'W' | 'E') => {
+ const wallOptions =
+ wall === 'N' ? options.wallN :
+ wall === 'S' ? options.wallS :
+ wall === 'W' ? options.wallW :
+ options.wallE;
+ const targetMaterial =
+ wall === 'N' ? this.wallNMaterial :
+ wall === 'S' ? this.wallSMaterial :
+ wall === 'W' ? this.wallWMaterial :
+ this.wallEMaterial;
+
+ targetMaterial.unfreeze();
+
+ targetMaterial.albedoColor = new BABYLON.Color3(...wallOptions.color);
+
+ const texPath = wallOptions.material === 'wood' ? '/client-assets/room/wall-textures/wood.png'
+ : wallOptions.material === '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');
+ apply('S');
+ apply('W');
+ apply('E');
this.onMeshUpdatedCallback?.(this.meshes);
}