wip

packages/frontend/src/pages/room.vue

@@ -18,6 +18,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkButton v-if="engine.ui.isGrabbing || engine.ui.isGrabbingForInstall" @click="rotate"><i class="ti ti-view-360-arrow"></i> (R)</MkButton>
 
 					<MkButton :primary="engine.enableGridSnapping.value" @click="showSnappingMenu">Grid Snap: {{ engine.enableGridSnapping.value ? 'on' : 'off' }}</MkButton>
+
+					<MkButton v-if="!engine.ui.isGrabbing && engine.selected.value != null" @click="removeSelectedObject"><i class="ti ti-trash"></i> (X)</MkButton>
 				</template>
 				<MkButton v-if="engine.isSitting.value" @click="engine.standUp()">降りる (Q)</MkButton>
 				<template v-for="interaction in interacions" :key="interaction.id">
@@ -559,6 +561,11 @@ function addObject(ev: PointerEvent) {
 	})), ev.currentTarget ?? ev.target);
 }
 
+function removeSelectedObject() {
+	engine.value?.removeSelectedObject();
+	canvas.value!.focus();
+}
+
 function getHex(c: [number, number, number]) {
 	return `#${c.map(x => Math.round(x * 255).toString(16).padStart(2, '0')).join('')}`;
 }

packages/frontend/src/utility/room/engine.ts

@@ -789,7 +789,13 @@ export class RoomEngine {
 	}) {
 		const def = getObjectDef(args.type);
 
-		const camelToKebab = (str: string) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+		// ex) hangingTShirt -> hanging-t-shirt
+		const camelToKebab = (s: string) => {
+			return s
+				.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+				.replace(/([A-Z])([A-Z][a-z])/g, '$1-$2')
+				.toLowerCase();
+		};
 
 		const root = new BABYLON.Mesh(`object_${args.id}_${args.type}`, this.scene);
 
@@ -1208,6 +1214,23 @@ export class RoomEngine {
 		});
 	}
 
+	public removeSelectedObject() {
+		if (this.selected.value == null) return;
+
+		const objectId = this.selected.value.objectId;
+
+		this.objectMeshs.get(objectId)?.dispose();
+		this.objectMeshs.delete(objectId);
+		this.objectInstances.delete(objectId);
+		this.roomState.installedObjects = this.roomState.installedObjects.filter(o => o.id !== objectId);
+		this.selected.value = null;
+
+		sound.playUrl('/client-assets/room/sfx/remove.mp3', {
+			volume: 1,
+			playbackRate: 1,
+		});
+	}
+
 	public changeGrabbingDistance(delta: number) {
 		if (this.grabbingCtx == null) return;
 		this.grabbingCtx.distance -= delta;

packages/frontend/src/utility/room/object-defs.ts

@@ -21,6 +21,7 @@ import { colorBox } from './objects/colorBox.js';
 import { cupNoodle } from './objects/cupNoodle.js';
 import { desk } from './objects/desk.js';
 import { ductTape } from './objects/ductTape.js';
+import { emptyBento } from './objects/emptyBento.js';
 import { energyDrink } from './objects/energyDrink.js';
 import { facialTissue } from './objects/facialTissue.js';
 import { keyboard } from './objects/keyboard.js';
@@ -71,6 +72,7 @@ export const OBJECT_DEFS = [
 	cupNoodle,
 	desk,
 	ductTape,
+	emptyBento,
 	energyDrink,
 	facialTissue,
 	keyboard,

packages/frontend/src/utility/room/objects/emptyBento.ts

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import { defineObject } from '../engine.js';
+
+export const emptyBento = defineObject({
+	id: 'emptyBento',
+	name: 'Empty Bento',
+	options: {
+		schema: {},
+		default: {},
+	},
+	placement: 'top',
+	createInstance: () => {
+		return {
+			interactions: {},
+		};
+	},
+});