curse/Curse
1
0
Fork 0
mirror of https://github.com/misskey-dev/misskey.git synced 2026-03-21 03:30:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
syuilo
2026-03-02 21:14:25 +09:00
parent 9d723aaaa6
commit 1b2717e256
3 changed files with 95 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/frontend/src/pages/room.vue
View File

@@ -27,19 +27,27 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
</div> </div>
<div v-if="engine != null && engine.isEditMode.value && engine.selected.value != null" class="_panel" :class="$style.overlayObjectInfoPanel"> <div v-if="engine != null && engine.isEditMode.value && engine.selected.value != null" :key="engine.selected.value.objectId" class="_panel" :class="$style.overlayObjectInfoPanel">
{{ engine.selected.value.objectDef.name }} {{ engine.selected.value.objectDef.name }}
<div v-for="[k, s] in Object.entries(engine.selected.value.objectDef.options.schema)" :key="k"> <div class="_gaps">
<div>{{ s.label }}</div> <div v-for="[k, s] in Object.entries(engine.selected.value.objectDef.options.schema)" :key="k">
<div v-if="s.type === 'color'"> <div>{{ s.label }}</div>
<MkInput :modelValue="getHex(engine.selected.value.objectState.options[k])" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) engine.updateObjectOption(engine.selected.value.objectId, k, c); }"></MkInput> <div v-if="s.type === 'color'">
</div> <MkInput :modelValue="getHex(engine.selected.value.objectState.options[k])" type="color" @update:modelValue="v => { const c = getRgb(v); if (c != null) engine.updateObjectOption(engine.selected.value.objectId, k, c); }"></MkInput>
<div v-else-if="s.type === 'boolean'"> </div>
<MkSwitch :modelValue="engine.selected.value.objectState.options[k]" @update:modelValue="v => engine.updateObjectOption(engine.selected.value.objectId, k, v)"></MkSwitch> <div v-else-if="s.type === 'boolean'">
</div> <MkSwitch :modelValue="engine.selected.value.objectState.options[k]" @update:modelValue="v => engine.updateObjectOption(engine.selected.value.objectId, k, v)"></MkSwitch>
<div v-else-if="s.type === 'enum'"> </div>
<MkSelect :items="s.enum.map(e => ({ label: e, value: e }))" :modelValue="engine.selected.value.objectState.options[k]" @update:modelValue="v => engine.updateObjectOption(engine.selected.value.objectId, k, v)"></MkSelect> <div v-else-if="s.type === 'enum'">
<MkSelect :items="s.enum.map(e => ({ label: e, value: e }))" :modelValue="engine.selected.value.objectState.options[k]" @update:modelValue="v => engine.updateObjectOption(engine.selected.value.objectId, k, v)"></MkSelect>
</div>
<div v-else-if="s.type === 'range'">
<MkRange :continuousUpdate="true" :min="s.min" :max="s.max" :step="s.step" :modelValue="engine.selected.value.objectState.options[k]" @update:modelValue="v => engine.updateObjectOption(engine.selected.value.objectId, k, v)"></MkRange>
</div>
<div v-else-if="s.type === 'image'">
<MkInput type="text" :modelValue="engine.selected.value.objectState.options[k]" @update:modelValue="v => engine.updateObjectOption(engine.selected.value.objectId, k, v)"></MkInput>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -69,6 +77,7 @@ import MkSelect from '@/components/MkSelect.vue';
import * as os from '@/os.js'; import * as os from '@/os.js';
import MkInput from '@/components/MkInput.vue'; import MkInput from '@/components/MkInput.vue';
import MkSwitch from '@/components/MkSwitch.vue'; import MkSwitch from '@/components/MkSwitch.vue';
import MkRange from '@/components/MkRange.vue';
const canvas = useTemplateRef('canvas'); const canvas = useTemplateRef('canvas');

31
packages/frontend/src/utility/room/engine.ts
View File

@@ -27,6 +27,7 @@ import { GridMaterial } from '@babylonjs/materials';
import { ShowInspector } from '@babylonjs/inspector'; import { ShowInspector } from '@babylonjs/inspector';
import { reactive, ref, shallowRef, triggerRef, watch } from 'vue'; import { reactive, ref, shallowRef, triggerRef, watch } from 'vue';
import { genId } from '../id.js'; import { genId } from '../id.js';
import { deepClone } from '../clone.js';
import { getObjectDef } from './object-defs.js'; import { getObjectDef } from './object-defs.js';
import { HorizontalCameraKeyboardMoveInput } from './utility.js'; import { HorizontalCameraKeyboardMoveInput } from './utility.js';
import * as sound from '@/utility/sound.js'; import * as sound from '@/utility/sound.js';
@@ -89,10 +90,30 @@ type EnumOptionSchema = {
enum: string[]; enum: string[];
}; };
type OptionsSchema = Record<string, NumberOptionSchema | BooleanOptionSchema | ColorOptionSchema | EnumOptionSchema>; type RangeOptionSchema = {
type: 'range';
label: string;
min: number;
max: number;
step?: number;
};
type ImageOptionSchema = {
type: 'image';
label: string;
};
type OptionsSchema = Record<string, NumberOptionSchema | BooleanOptionSchema | ColorOptionSchema | EnumOptionSchema | RangeOptionSchema | ImageOptionSchema>;
type GetOptionsSchemaValues<T extends OptionsSchema> = { type GetOptionsSchemaValues<T extends OptionsSchema> = {
[K in keyof T]: T[K] extends NumberOptionSchema ? number : T[K] extends BooleanOptionSchema ? boolean : T[K] extends ColorOptionSchema ? [number, number, number] : T[K] extends EnumOptionSchema ? T[K]['enum'][number] : never; [K in keyof T]:
T[K] extends NumberOptionSchema ? number :
T[K] extends BooleanOptionSchema ? boolean :
T[K] extends ColorOptionSchema ? [number, number, number] :
T[K] extends EnumOptionSchema ? T[K]['enum'][number] :
T[K] extends RangeOptionSchema ? number :
T[K] extends ImageOptionSchema ? string | null :
never;
}; };
type ObjectDef<OpSc extends OptionsSchema = OptionsSchema> = { type ObjectDef<OpSc extends OptionsSchema = OptionsSchema> = {
@@ -1144,12 +1165,14 @@ export class RoomEngine {
const def = getObjectDef(type); const def = getObjectDef(type);
const options = deepClone(def.options.default);
const { root } = await this.loadObject({ const { root } = await this.loadObject({
id: id, id: id,
type, type,
position: new BABYLON.Vector3(0, 0, 0), position: new BABYLON.Vector3(0, 0, 0),
rotation: new BABYLON.Vector3(0, Math.PI, 0), rotation: new BABYLON.Vector3(0, Math.PI, 0),
options: def.options.default, options,
}); });
const ghost = this.createGhost(root); const ghost = this.createGhost(root);
@@ -1197,7 +1220,7 @@ export class RoomEngine {
position: [pos.x, pos.y, pos.z], position: [pos.x, pos.y, pos.z],
rotation: [rotation.x, rotation.y, rotation.z], rotation: [rotation.x, rotation.y, rotation.z],
sticky, sticky,
options: def.options.default, options,
}); });
}, },
}; };

55
packages/frontend/src/utility/room/objects/pictureFrame.ts
View File

@@ -20,10 +20,31 @@ export const pictureFrame = defineObject({
label: 'Direction', label: 'Direction',
enum: ['vertical', 'horizontal'], enum: ['vertical', 'horizontal'],
}, },
matHThickness: {
type: 'range',
label: 'Mat horizontal thickness',
min: 0,
max: 1,
step: 0.01,
},
matVThickness: {
type: 'range',
label: 'Mat vertical thickness',
min: 0,
max: 1,
step: 0.01,
},
customPicture: {
type: 'image',
label: 'Custom picture',
},
}, },
default: { default: {
frameColor: [0.71, 0.58, 0.39], frameColor: [0.71, 0.58, 0.39],
direction: 'vertical', direction: 'vertical',
matHThickness: 0.125,
matVThickness: 0.15,
customPicture: null,
}, },
}, },
placement: 'side', placement: 'side',
@@ -84,16 +105,30 @@ export const pictureFrame = defineObject({
applyDirection(); applyDirection();
//matMesh.morphTargetManager!.getTargetByName('MatH')!.influence = 0.6; const applyMatThickness = () => {
//matMesh.morphTargetManager!.getTargetByName('MatV')!.influence = 0.6; matMesh.morphTargetManager!.getTargetByName('MatH')!.influence = options.matHThickness;
//pictureMesh.morphTargetManager!.getTargetByName('PictureH')!.influence = 0.6; matMesh.morphTargetManager!.getTargetByName('MatV')!.influence = options.matVThickness;
//pictureMesh.morphTargetManager!.getTargetByName('PictureV')!.influence = 0.6; pictureMesh.morphTargetManager!.getTargetByName('PictureH')!.influence = options.matHThickness;
pictureMesh.morphTargetManager!.getTargetByName('PictureV')!.influence = options.matVThickness;
};
const tex = new BABYLON.Texture('http://syu-win.local:3000/files/b6cefaba-3093-4c57-a7f8-993dee62c6f7', room.scene, false, false); applyMatThickness();
const pictureMaterial = findMaterial('__X_PICTURE__'); const pictureMaterial = findMaterial('__X_PICTURE__');
pictureMaterial.albedoColor = new BABYLON.Color3(1, 1, 1);
pictureMaterial.albedoTexture = tex; const applyCustomPicture = () => {
if (options.customPicture != null) {
const tex = new BABYLON.Texture(options.customPicture, room.scene, false, false);
pictureMaterial.albedoColor = new BABYLON.Color3(1, 1, 1);
pictureMaterial.albedoTexture = tex;
} else {
pictureMaterial.albedoColor = new BABYLON.Color3(0.5, 0.5, 0.5);
pictureMaterial.albedoTexture = null;
}
};
applyCustomPicture();
const frameMaterial = findMaterial('__X_FRAME__'); const frameMaterial = findMaterial('__X_FRAME__');
@@ -115,6 +150,12 @@ export const pictureFrame = defineObject({
if (k === 'direction') { if (k === 'direction') {
applyDirection(); applyDirection();
} }
if (k === 'matHThickness' || k === 'matVThickness') {
applyMatThickness();
}
if (k === 'customPicture') {
applyCustomPicture();
}
}, },
interactions: {}, interactions: {},
}; };