diff --git a/packages/frontend/src/pages/room.vue b/packages/frontend/src/pages/room.vue
index d4621df02a..63158deb05 100644
--- a/packages/frontend/src/pages/room.vue
+++ b/packages/frontend/src/pages/room.vue
@@ -60,6 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-only
Toggle Light
Edit mode: {{ engine.isEditMode.value ? 'on' : 'off' }}
addObject
+ save
@@ -202,280 +203,282 @@ function onWheel(ev: WheelEvent) {
}
}
-onMounted(() => {
- engine.value = new RoomEngine({
- roomType: 'default',
- installedObjects: [{
- id: 'a',
- type: 'cardboardBox',
- position: [120, 0, 50],
- rotation: [0, 0.2, 0],
- options: {
- variation: 'mikan',
- },
- }, {
- id: 'a2',
- type: 'openedCardboardBox',
- position: [115, 0, -20],
- rotation: [0, -0.1, 0],
- options: {},
- }, {
- id: 'b',
- type: 'cardboardBox',
- position: [120, 31, 50],
- rotation: [0, 0.1, 0],
- sticky: 'a',
- options: {
- variation: 'aizon',
- },
- }, {
- id: '1',
- type: 'cardboardBox',
- position: [80, 0, 110],
- rotation: [0, 2, 0],
- options: {
- variation: null,
- },
- }, {
- id: 'c',
- type: 'desk',
- position: [-115, 0, 85],
- rotation: [0, -Math.PI / 2, 0],
- options: {},
- }, {
- id: 'd',
- type: 'monitor',
- position: [-130, 70, 85],
- rotation: [0, -Math.PI / 2, 0],
- sticky: 'c',
- options: {},
- }, {
- id: 'd2',
- type: 'keyboard',
- position: [-110, 70, 85],
- rotation: [0, Math.PI, 0],
- sticky: 'c',
- options: {},
- }, {
- id: 'e',
- type: 'chair',
- position: [-75, 0, 85],
- rotation: [0, Math.PI / 2, 0],
- options: {},
- }, {
- id: 'f',
- type: 'plant',
- position: [-60, 90, 165],
- rotation: [0, 0, 0],
- options: {},
- }, {
- id: 'f2',
- type: 'monstera',
- position: [-55, 90, 175],
- rotation: [0, 0, 0],
- options: {},
- }, {
- id: 'f22',
- type: 'tabletopDigitalClock',
- position: [-35, 90, 175],
- rotation: [0, Math.PI, 0],
- options: {
- bodyStyle: 'color',
- bodyColor: [0.45, 0.8, 1],
- },
- }, {
- id: 'f3',
- type: 'snakeplant',
- position: [40, 90, 170],
- rotation: [0, 0, 0],
- options: {},
- }, {
- id: 'f4',
- type: 'cactusS',
- position: [50, 90, 155],
- rotation: [0, 0, 0],
- options: {},
- }, {
- id: 'g',
- type: 'mug',
- position: [-45, 90, 160],
- rotation: [0, Math.PI / 2, 0],
- options: {},
- }, {
- id: 'h',
- type: 'aircon',
- position: [80, 215, 150],
- rotation: [0, Math.PI, 0],
- options: {},
- }, {
- id: 'i',
- type: 'lavaLamp',
- position: [60, 90, 170],
- rotation: [0, 0, 0],
- options: {},
- }, {
- id: 'j',
- type: 'steelRack',
- position: [130, 0, 115],
- rotation: [0, Math.PI / 2, 0],
- options: {},
- }, {
- id: 'j2',
- type: 'aquarium',
- position: [130, 100, 115],
- rotation: [0, Math.PI / 2, 0],
- sticky: 'j',
- options: {},
- }, {
- id: '8ce7a065-120d-479f-9153-aa3b6a1fd4a7',
- type: 'router',
- position: [130, 142, 135],
- rotation: [0, Math.PI / 2, 0],
- sticky: 'j',
- options: {},
- }, {
- id: 'j4',
- type: 'letterCase',
- position: [130, 59, 125],
- rotation: [0, Math.PI / 2, 0],
- sticky: 'j',
- options: {},
- }, {
- id: 'a37cb419-d028-47a7-b317-7553bc2553e0',
- type: 'ductTape',
- position: [133, 85, 130],
- rotation: [0, 0, 0],
- sticky: 'j4',
- options: {},
- }, {
- id: 'j3',
- type: 'powerStrip',
- position: [130, 13, 115],
- rotation: [0, Math.PI / 2, 0],
- sticky: 'j',
- options: {},
- }, {
- id: 'k',
- type: 'cupNoodle',
- position: [-100, 70, 40],
- rotation: [0, -2, 0],
- sticky: 'c',
- options: {},
- }, {
- id: 'k2',
- type: 'tabletopCalendar',
- position: [-130, 70, 40],
- rotation: [0, -Math.PI / 2, 0],
- sticky: 'c',
- options: {},
- }, {
- id: 'l',
- type: 'banknote',
- position: [-100, 70, 55],
- rotation: [0, 2, 0],
- sticky: 'c',
- options: {},
- }, {
- id: 'm',
- type: 'energyDrink',
- position: [-100, 70, 120],
- rotation: [0, -1, 0],
- sticky: 'c',
- options: {},
- }, {
- id: 'n',
- type: 'milk',
- position: [-120, 70, 130],
- rotation: [0, 1.5, 0],
- sticky: 'c',
- options: {},
- }, {
- id: 'o',
- type: 'facialTissue',
- position: [-100, 70, 138],
- rotation: [0, -1.5, 0],
- sticky: 'c',
- options: {},
- }, {
- id: 'p',
- type: 'tv',
- position: [-135, 88, -5],
- rotation: [0, -Math.PI / 2, 0],
- sticky: 'q',
- options: {},
- }, {
- id: 'q',
- type: 'colorBox',
- position: [-135, 0, -5],
- rotation: [0, -Math.PI / 2, 0],
- options: {},
- }, {
- id: 'r',
- type: 'pachira',
- position: [135, 0, -135],
- rotation: [0, 0, 0],
- options: {},
- }, {
- id: 's',
- type: 'wallClock',
- position: [-150, 200, 100],
- rotation: [0, -Math.PI / 2, 0],
- options: {},
- }, {
- id: 's2',
- type: 'woodSoundAbsorbingPanel',
- position: [-150, 140, 80],
- rotation: [0, -Math.PI / 2, 0],
- options: {},
- }, {
- id: 't',
- type: 'book',
- position: [10, 100, 10],
- rotation: [0, 0, 0],
- options: {
- variation: 1,
- },
- }, {
- id: 'u',
- type: 'bed',
- position: [-30, 0, -100],
- rotation: [0, Math.PI, 0],
- options: {},
- }, {
- id: 'v',
- type: 'ceilingFanLight',
- position: [0, 250, 0],
- rotation: [0, 0, 0],
- isMainLight: true,
- options: {},
- }, {
- id: 'w',
- type: 'roundRug',
- position: [0, 0, 0],
- rotation: [0, 0, 0],
- options: {},
- }, {
- id: 'x',
- type: 'blind',
- position: [-35, 194, 185],
- rotation: [0, Math.PI, 0],
- options: {
- blades: 24,
- angle: 0.5,
- open: 0.8,
- },
- }, {
- id: 'x2',
- type: 'blind',
- position: [35, 194, 185],
- rotation: [0, Math.PI, 0],
- options: {
- blades: 24,
- angle: -0.4,
- open: 0.5,
- },
- }],
+const data = localStorage.getItem('roomData') != null ? JSON.parse(localStorage.getItem('roomData')!) : {
+ roomType: 'default',
+ installedObjects: [{
+ id: 'a',
+ type: 'cardboardBox',
+ position: [120, 0, 50],
+ rotation: [0, 0.2, 0],
+ options: {
+ variation: 'mikan',
+ },
}, {
+ id: 'a2',
+ type: 'openedCardboardBox',
+ position: [115, 0, -20],
+ rotation: [0, -0.1, 0],
+ options: {},
+ }, {
+ id: 'b',
+ type: 'cardboardBox',
+ position: [120, 31, 50],
+ rotation: [0, 0.1, 0],
+ sticky: 'a',
+ options: {
+ variation: 'aizon',
+ },
+ }, {
+ id: '1',
+ type: 'cardboardBox',
+ position: [80, 0, 110],
+ rotation: [0, 2, 0],
+ options: {
+ variation: null,
+ },
+ }, {
+ id: 'c',
+ type: 'desk',
+ position: [-115, 0, 85],
+ rotation: [0, -Math.PI / 2, 0],
+ options: {},
+ }, {
+ id: 'd',
+ type: 'monitor',
+ position: [-130, 70, 85],
+ rotation: [0, -Math.PI / 2, 0],
+ sticky: 'c',
+ options: {},
+ }, {
+ id: 'd2',
+ type: 'keyboard',
+ position: [-110, 70, 85],
+ rotation: [0, Math.PI, 0],
+ sticky: 'c',
+ options: {},
+ }, {
+ id: 'e',
+ type: 'chair',
+ position: [-75, 0, 85],
+ rotation: [0, Math.PI / 2, 0],
+ options: {},
+ }, {
+ id: 'f',
+ type: 'plant',
+ position: [-60, 90, 165],
+ rotation: [0, 0, 0],
+ options: {},
+ }, {
+ id: 'f2',
+ type: 'monstera',
+ position: [-55, 90, 175],
+ rotation: [0, 0, 0],
+ options: {},
+ }, {
+ id: 'f22',
+ type: 'tabletopDigitalClock',
+ position: [-35, 90, 175],
+ rotation: [0, Math.PI, 0],
+ options: {
+ bodyStyle: 'color',
+ bodyColor: [0.45, 0.8, 1],
+ },
+ }, {
+ id: 'f3',
+ type: 'snakeplant',
+ position: [40, 90, 170],
+ rotation: [0, 0, 0],
+ options: {},
+ }, {
+ id: 'f4',
+ type: 'cactusS',
+ position: [50, 90, 155],
+ rotation: [0, 0, 0],
+ options: {},
+ }, {
+ id: 'g',
+ type: 'mug',
+ position: [-45, 90, 160],
+ rotation: [0, Math.PI / 2, 0],
+ options: {},
+ }, {
+ id: 'h',
+ type: 'aircon',
+ position: [80, 215, 150],
+ rotation: [0, Math.PI, 0],
+ options: {},
+ }, {
+ id: 'i',
+ type: 'lavaLamp',
+ position: [60, 90, 170],
+ rotation: [0, 0, 0],
+ options: {},
+ }, {
+ id: 'j',
+ type: 'steelRack',
+ position: [130, 0, 115],
+ rotation: [0, Math.PI / 2, 0],
+ options: {},
+ }, {
+ id: 'j2',
+ type: 'aquarium',
+ position: [130, 100, 115],
+ rotation: [0, Math.PI / 2, 0],
+ sticky: 'j',
+ options: {},
+ }, {
+ id: '8ce7a065-120d-479f-9153-aa3b6a1fd4a7',
+ type: 'router',
+ position: [130, 142, 135],
+ rotation: [0, Math.PI / 2, 0],
+ sticky: 'j',
+ options: {},
+ }, {
+ id: 'j4',
+ type: 'letterCase',
+ position: [130, 59, 125],
+ rotation: [0, Math.PI / 2, 0],
+ sticky: 'j',
+ options: {},
+ }, {
+ id: 'a37cb419-d028-47a7-b317-7553bc2553e0',
+ type: 'ductTape',
+ position: [133, 85, 130],
+ rotation: [0, 0, 0],
+ sticky: 'j4',
+ options: {},
+ }, {
+ id: 'j3',
+ type: 'powerStrip',
+ position: [130, 13, 115],
+ rotation: [0, Math.PI / 2, 0],
+ sticky: 'j',
+ options: {},
+ }, {
+ id: 'k',
+ type: 'cupNoodle',
+ position: [-100, 70, 40],
+ rotation: [0, -2, 0],
+ sticky: 'c',
+ options: {},
+ }, {
+ id: 'k2',
+ type: 'tabletopCalendar',
+ position: [-130, 70, 40],
+ rotation: [0, -Math.PI / 2, 0],
+ sticky: 'c',
+ options: {},
+ }, {
+ id: 'l',
+ type: 'banknote',
+ position: [-100, 70, 55],
+ rotation: [0, 2, 0],
+ sticky: 'c',
+ options: {},
+ }, {
+ id: 'm',
+ type: 'energyDrink',
+ position: [-100, 70, 120],
+ rotation: [0, -1, 0],
+ sticky: 'c',
+ options: {},
+ }, {
+ id: 'n',
+ type: 'milk',
+ position: [-120, 70, 130],
+ rotation: [0, 1.5, 0],
+ sticky: 'c',
+ options: {},
+ }, {
+ id: 'o',
+ type: 'facialTissue',
+ position: [-100, 70, 138],
+ rotation: [0, -1.5, 0],
+ sticky: 'c',
+ options: {},
+ }, {
+ id: 'p',
+ type: 'tv',
+ position: [-135, 88, -5],
+ rotation: [0, -Math.PI / 2, 0],
+ sticky: 'q',
+ options: {},
+ }, {
+ id: 'q',
+ type: 'colorBox',
+ position: [-135, 0, -5],
+ rotation: [0, -Math.PI / 2, 0],
+ options: {},
+ }, {
+ id: 'r',
+ type: 'pachira',
+ position: [135, 0, -135],
+ rotation: [0, 0, 0],
+ options: {},
+ }, {
+ id: 's',
+ type: 'wallClock',
+ position: [-150, 200, 100],
+ rotation: [0, -Math.PI / 2, 0],
+ options: {},
+ }, {
+ id: 's2',
+ type: 'woodSoundAbsorbingPanel',
+ position: [-150, 140, 80],
+ rotation: [0, -Math.PI / 2, 0],
+ options: {},
+ }, {
+ id: 't',
+ type: 'book',
+ position: [10, 100, 10],
+ rotation: [0, 0, 0],
+ options: {
+ variation: 1,
+ },
+ }, {
+ id: 'u',
+ type: 'bed',
+ position: [-30, 0, -100],
+ rotation: [0, Math.PI, 0],
+ options: {},
+ }, {
+ id: 'v',
+ type: 'ceilingFanLight',
+ position: [0, 250, 0],
+ rotation: [0, 0, 0],
+ isMainLight: true,
+ options: {},
+ }, {
+ id: 'w',
+ type: 'roundRug',
+ position: [0, 0, 0],
+ rotation: [0, 0, 0],
+ options: {},
+ }, {
+ id: 'x',
+ type: 'blind',
+ position: [-35, 194, 185],
+ rotation: [0, Math.PI, 0],
+ options: {
+ blades: 24,
+ angle: 0.5,
+ open: 0.8,
+ },
+ }, {
+ id: 'x2',
+ type: 'blind',
+ position: [35, 194, 185],
+ rotation: [0, Math.PI, 0],
+ options: {
+ blades: 24,
+ angle: -0.4,
+ open: 0.5,
+ },
+ }],
+};
+
+onMounted(() => {
+ engine.value = new RoomEngine(data, {
canvas: canvas.value!,
});
@@ -593,6 +596,11 @@ function getRgb(hex: string | number): [number, number, number] | null {
return m.map(x => parseInt(x, 16) / 255) as [number, number, number];
}
+function save() {
+ if (engine.value == null) return;
+ localStorage.setItem('roomData', JSON.stringify(engine.value.roomState));
+}
+
definePage(() => ({
title: 'Room',
icon: 'ti ti-door',
diff --git a/packages/frontend/src/utility/room/engine.ts b/packages/frontend/src/utility/room/engine.ts
index 14bd819cea..d112a396d2 100644
--- a/packages/frontend/src/utility/room/engine.ts
+++ b/packages/frontend/src/utility/room/engine.ts
@@ -521,7 +521,7 @@ export class RoomEngine {
id: o.id,
type: o.type,
position: new BABYLON.Vector3(...o.position),
- rotation: new BABYLON.Vector3(o.rotation[0], -o.rotation[1], o.rotation[2]),
+ rotation: new BABYLON.Vector3(o.rotation[0], o.rotation[1], o.rotation[2]),
options: o.options,
isMainLight: o.isMainLight,
})));