1
0
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-13 15:15:45 +02:00
This commit is contained in:
syuilo
2026-04-30 09:17:22 +09:00
parent c2d5a33400
commit 8f5c09daa1
6 changed files with 222 additions and 50 deletions

View File

@@ -7,23 +7,55 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.root">
<div class="_gaps">
<MkFolder>
<template #label>Wall N</template>
<XWallOption :options="options.walls.n" @update="v => { update({ walls: { ...options.walls, n: v } }); }"></XWallOption>
<template #label>Walls</template>
<div class="_gaps_s">
<MkFolder>
<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>
</div>
</MkFolder>
<MkFolder>
<template #label>Wall S</template>
<XWallOption :options="options.walls.s" @update="v => { update({ walls: { ...options.walls, s: v } }); }"></XWallOption>
</MkFolder>
<template #label>Pillars</template>
<MkFolder>
<template #label>Wall W</template>
<XWallOption :options="options.walls.w" @update="v => { update({ walls: { ...options.walls, w: v } }); }"></XWallOption>
</MkFolder>
<div class="_gaps_s">
<MkFolder>
<template #label>Pillar NW</template>
<XPillarOption :options="options.pillars.nw" @update="v => { update({ pillars: { ...options.pillars, nw: v } }); }"></XPillarOption>
</MkFolder>
<MkFolder>
<template #label>Wall E</template>
<XWallOption :options="options.walls.e" @update="v => { update({ walls: { ...options.walls, e: v } }); }"></XWallOption>
<MkFolder>
<template #label>Pillar NE</template>
<XPillarOption :options="options.pillars.ne" @update="v => { update({ pillars: { ...options.pillars, ne: v } }); }"></XPillarOption>
</MkFolder>
<MkFolder>
<template #label>Pillar SW</template>
<XPillarOption :options="options.pillars.sw" @update="v => { update({ pillars: { ...options.pillars, sw: v } }); }"></XPillarOption>
</MkFolder>
<MkFolder>
<template #label>Pillar SE</template>
<XPillarOption :options="options.pillars.se" @update="v => { update({ pillars: { ...options.pillars, se: v } }); }"></XPillarOption>
</MkFolder>
</div>
</MkFolder>
<MkFolder>
@@ -64,6 +96,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue';
import XWallOption from './room.default-heya-wall-options.vue';
import XPillarOption from './room.default-heya-pillar-options.vue';
import type { ObjectDef } from '@/world/room/object.js';
import type { SimpleHeyaOptions } from '@/world/room/heya.js';
import { i18n } from '@/i18n.js';

View File

@@ -0,0 +1,57 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div :class="$style.root">
<div class="_gaps">
<MkSelect
:items="[
{ label: 'None', value: null },
{ label: 'Wood', value: 'wood' },
{ label: 'Concrete', value: 'concrete' },
]" :modelValue="options.material" @update:modelValue="v => { update({ material: v }); }"
>
<template #label>wallpaper</template>
</MkSelect>
<MkInput :modelValue="getHex(options.color)" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) update({ color: c }); }">
<template #label>color</template>
</MkInput>
<MkSwitch :modelValue="options.show" @update:modelValue="v => { update({ show: v }); }">
<template #label>show</template>
</MkSwitch>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, defineAsyncComponent, nextTick, onMounted, onUnmounted, ref, shallowRef, useTemplateRef, watch } from 'vue';
import type { ObjectDef } from '@/world/room/object.js';
import type { SimpleHeyaOptions } from '@/world/room/heya.js';
import { i18n } from '@/i18n.js';
import MkButton from '@/components/MkButton.vue';
import MkSelect from '@/components/MkSelect.vue';
import * as os from '@/os.js';
import MkInput from '@/components/MkInput.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkRange from '@/components/MkRange.vue';
import { getHex, getRgb } from '@/world/utility.js';
const props = defineProps<{
options: SimpleHeyaOptions['pillars']['nw' | 'ne' | 'sw' | 'se'];
}>();
const emit = defineEmits<{
(ev: 'update', v: SimpleHeyaOptions['pillars']['nw' | 'ne' | 'sw' | 'se']): void;
}>();
function update(v: Partial<SimpleHeyaOptions['pillars']['nw' | 'ne' | 'sw' | 'se']>) {
emit('update', { ...props.options, ...v });
}
</script>
<style lang="scss" module>
.root {
}
</style>

View File

@@ -207,6 +207,28 @@ const data = localStorage.getItem('roomData') != null ? JSON.parse(localStorage.
withHabaki: false,
},
},
pillars: {
nw: {
material: null,
color: [0.9, 0.9, 0.9],
show: false,
},
ne: {
material: null,
color: [0.9, 0.9, 0.9],
show: false,
},
sw: {
material: null,
color: [0.9, 0.9, 0.9],
show: false,
},
se: {
material: null,
color: [0.9, 0.9, 0.9],
show: false,
},
},
flooring: {
material: 'wood',
color: [0.9, 0.9, 0.9],
@@ -257,6 +279,30 @@ if (data.heya.options.walls == null) {
},
};
}
if (data.heya.options.pillars == null) {
data.heya.options.pillars = {
nw: {
material: null,
color: [0.9, 0.9, 0.9],
show: false,
},
ne: {
material: null,
color: [0.9, 0.9, 0.9],
show: false,
},
sw: {
material: null,
color: [0.9, 0.9, 0.9],
show: false,
},
se: {
material: null,
color: [0.9, 0.9, 0.9],
show: false,
},
};
}
let latestData = deepClone(data);

View File

@@ -1,3 +1,4 @@
/* eslint-disable id-denylist */
/*
* SPDX-FileCopyrightText: syuilo and misskey-project
* SPDX-License-Identifier: AGPL-3.0-only
@@ -26,24 +27,22 @@ export abstract class HeyaManager<T = any> {
abstract dispose(): void;
}
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 = {
dimension: [number, number];
window: 'none' | 'kosidakamado' | 'demado' | 'hakidasimado';
walls: {
n: SimpleHeyaWallBase;
s: SimpleHeyaWallBase;
w: SimpleHeyaWallBase;
e: SimpleHeyaWallBase;
};
walls: Record<'n' | 's' | 'w' | 'e', {
material: null | 'wood' | 'concrete';
color: [number, number, number];
withHari: boolean;
hariMaterial: null | 'wood' | 'concrete';
hariColor: [number, number, number];
withHabaki: boolean;
}>;
pillars: Record<'nw' | 'ne' | 'sw' | 'se', {
material: null | 'wood' | 'concrete';
color: [number, number, number];
show: boolean;
}>;
flooring: {
material: null | 'wood' | 'concrete';
color: [number, number, number];
@@ -58,27 +57,16 @@ export type JapaneseHeyaOptions = {
window: 'none' | 'kosidakamado' | 'demado' | 'hakidasimado';
};
// TODO: マテリアルは必要になるまで作成しないようにする
export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
private loaderResult: BABYLON.ISceneLoaderAsyncResult | null = null;
private meshes: BABYLON.Mesh[] = [];
private wallRoots: {
n: BABYLON.TransformNode;
s: BABYLON.TransformNode;
w: BABYLON.TransformNode;
e: BABYLON.TransformNode;
} | null = null;
private wallMaterials: {
n: BABYLON.PBRMaterial;
s: BABYLON.PBRMaterial;
w: BABYLON.PBRMaterial;
e: BABYLON.PBRMaterial;
} | null = null;
private wallHariMaterials: {
n: BABYLON.PBRMaterial;
s: BABYLON.PBRMaterial;
w: BABYLON.PBRMaterial;
e: BABYLON.PBRMaterial;
} | null = null;
private wallRoots: Record<'n' | 's' | 'w' | 'e', BABYLON.TransformNode> = null as any;
private wallMaterials: Record<'n' | 's' | 'w' | 'e', BABYLON.PBRMaterial> | null = null;
private wallHariMaterials: Record<'n' | 's' | 'w' | 'e', BABYLON.PBRMaterial> | null = null;
private pillarRoots: Record<'nw' | 'ne' | 'sw' | 'se', BABYLON.TransformNode> | null = null;
private pillarMaterials: Record<'nw' | 'ne' | 'sw' | 'se', BABYLON.PBRMaterial> | null = null;
private ceilingMaterial: BABYLON.PBRMaterial | null = null;
private floorMaterial: BABYLON.PBRMaterial | null = null;
@@ -121,6 +109,13 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
e: this.loaderResult.transformNodes.find(t => t.name.includes('__WALL_E__'))!,
};
this.pillarRoots = {
nw: this.loaderResult.transformNodes.find(t => t.name.includes('__PILLAR_NW__'))!,
ne: this.loaderResult.transformNodes.find(t => t.name.includes('__PILLAR_NE__'))!,
sw: this.loaderResult.transformNodes.find(t => t.name.includes('__PILLAR_SW__'))!,
se: this.loaderResult.transformNodes.find(t => t.name.includes('__PILLAR_SE__'))!,
};
const wallMaterial = findMaterial(this.meshes[0], '__X_WALL__');
this.wallMaterials = {
n: wallMaterial.clone('wallNMaterial'),
@@ -137,6 +132,14 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
e: hariMaterial.clone('wallEHariMaterial'),
};
const pillarMaterial = findMaterial(this.meshes[0], '__X_PILLAR__');
this.pillarMaterials = {
nw: pillarMaterial.clone('pillarNWMaterial'),
ne: pillarMaterial.clone('pillarNEMaterial'),
sw: pillarMaterial.clone('pillarSWMaterial'),
se: pillarMaterial.clone('pillarSEMaterial'),
};
for (const [k, v] of Object.entries(this.wallRoots)) {
for (const m of v.getChildMeshes().filter(m => m.material === wallMaterial)) {
m.material = this.wallMaterials[k];
@@ -145,6 +148,11 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
m.material = this.wallHariMaterials[k];
}
}
for (const [k, v] of Object.entries(this.pillarRoots)) {
for (const m of v.getChildMeshes().filter(m => m.material === pillarMaterial)) {
m.material = this.pillarMaterials[k];
}
}
this.ceilingMaterial = findMaterial(this.meshes[0], '__X_CEILING__');
this.floorMaterial = findMaterial(this.meshes[0], '__X_FLOOR__');
@@ -161,9 +169,9 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
for (const mesh of wallRoot.getChildMeshes()) {
if (mesh.name.includes('__X_HARI__')) {
mesh.isVisible = wallOptions.withHari;
mesh.setEnabled(wallOptions.withHari);
} else if (mesh.name.includes('__X_HABAKI__')) {
mesh.isVisible = wallOptions.withHabaki;
mesh.setEnabled(wallOptions.withHabaki);
}
}
@@ -208,6 +216,31 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
}
}
for (const type of ['nw', 'ne', 'sw', 'se'] as const) {
const pillarRoot = this.pillarRoots[type];
const pillarOptions = options.pillars[type];
pillarRoot.setEnabled(pillarOptions.show);
const targetMaterial = this.pillarMaterials[type];
targetMaterial.unfreeze();
targetMaterial.albedoColor = new BABYLON.Color3(...pillarOptions.color);
const texPath = pillarOptions.material === 'wood' ? '/client-assets/room/textures/wall-wood2.png'
: pillarOptions.material === 'concrete' ? '/client-assets/room/textures/wall-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();
}
{
this.ceilingMaterial.unfreeze();
this.ceilingMaterial.albedoColor = new BABYLON.Color3(...options.ceiling.color);
@@ -250,14 +283,14 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
public dispose() {
if (this.loaderResult != null) {
for (const m of this.loaderResult.meshes) {
m.dispose();
m.dispose(false, true);
}
for (const t of this.loaderResult.transformNodes) {
t.dispose();
t.dispose(false, true);
}
}
for (const m of this.meshes) {
m.dispose();
m.dispose(false, true);
}
for (const m of Object.values(this.wallMaterials ?? {})) {
m.dispose();
@@ -265,5 +298,8 @@ export class SimpleHeyaManager extends HeyaManager<SimpleHeyaOptions> {
for (const m of Object.values(this.wallHariMaterials ?? {})) {
m.dispose();
}
for (const m of Object.values(this.pillarMaterials ?? {})) {
m.dispose();
}
}
}