wip

packages/frontend/src/pages/room.vue

@@ -229,7 +229,7 @@ onMounted(() => {
 			id: 'c',
 			type: 'desk',
 			position: [-115, 0, 85],
-			rotation: [0, Math.PI, 0],
+			rotation: [0, -Math.PI / 2, 0],
 			options: {},
 		}, {
 			id: 'd',

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

@@ -111,6 +111,7 @@ type ObjectDef<OpSc extends OptionsSchema = OptionsSchema> = {
 		loaderResult: BABYLON.ISceneLoaderAsyncResult;
 		meshUpdated: () => void;
 		findMesh: (keyword: string) => BABYLON.Mesh;
+		findMaterial: (keyword: string) => BABYLON.PBRMaterial;
 	}) => RoomObjectInstance<GetOptionsSchemaValues<OpSc>>;
 };
 
@@ -869,6 +870,14 @@ export class RoomEngine {
 				}
 				return mesh as BABYLON.Mesh;
 			},
+			findMaterial: (keyword) => {
+				for (const m of root.getChildMeshes()) {
+					if (m.material != null && m.material.name.includes(keyword)) {
+						return m.material as BABYLON.PBRMaterial;
+					}
+				}
+				throw new Error(`Material with keyword "${keyword}" not found for object ${args.type} (${args.id})`);
+			},
 		});
 
 		this.objectInstances.set(args.id, objectInstance);

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

@@ -5,6 +5,7 @@
 
 import { a4Case } from './objects/a4Case.js';
 import { aircon } from './objects/aircon.js';
+import { allInOnePc } from './objects/allInOnePc.js';
 import { aquarium } from './objects/aquarium.js';
 import { aromaReedDiffuser } from './objects/aromaReedDiffuser.js';
 import { banknote } from './objects/banknote.js';
@@ -53,6 +54,7 @@ import { woodSoundAbsorbingPanel } from './objects/woodSoundAbsorbingPanel.js';
 export const OBJECT_DEFS = [
 	a4Case,
 	aircon,
+	allInOnePc,
 	aquarium,
 	aromaReedDiffuser,
 	banknote,

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

@@ -0,0 +1,65 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import * as BABYLON from '@babylonjs/core';
+import { defineObject } from '../engine.js';
+
+export const allInOnePc = defineObject({
+	id: 'allInOnePc',
+	name: 'All-in-One PC',
+	options: {
+		schema: {
+			bodyColor: {
+				type: 'color',
+				label: 'Body color',
+			},
+			bezelColor: {
+				type: 'color',
+				label: 'Bezel color',
+			},
+		},
+		default: {
+			bodyColor: [1, 1, 1],
+			bezelColor: [0, 0, 0],
+		},
+	},
+	placement: 'top',
+	createInstance: ({ room, options, findMaterial }) => {
+		const bodyMaterial = findMaterial('__X_BODY__');
+		const bezelMaterial = findMaterial('__X_BEZEL__');
+		const screenMaterial = findMaterial('__X_SCREEN__');
+
+		const tex = new BABYLON.Texture('http://syu-win.local:3000/files/b6cefaba-3093-4c57-a7f8-993dee62c6f7', room.scene, false, false);
+
+		screenMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
+		screenMaterial.ambientColor = new BABYLON.Color3(0, 0, 0);
+		screenMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
+		screenMaterial.albedoColor = new BABYLON.Color3(0, 0, 0);
+		screenMaterial.emissiveTexture = tex;
+		screenMaterial.emissiveColor = new BABYLON.Color3(0.4, 0.4, 0.4);
+		screenMaterial.emissiveTexture.level = 0.5;
+
+		const applyBodyColor = () => {
+			const [r, g, b] = options.bodyColor;
+			bodyMaterial.albedoColor = new BABYLON.Color3(r, g, b);
+		};
+
+		const applyBezelColor = () => {
+			const [r, g, b] = options.bezelColor;
+			bezelMaterial.albedoColor = new BABYLON.Color3(r, g, b);
+		};
+
+		applyBodyColor();
+		applyBezelColor();
+
+		return {
+			onOptionsUpdated: ([k, v]) => {
+				applyBodyColor();
+				applyBezelColor();
+			},
+			interactions: {},
+		};
+	},
+});

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

@@ -3,18 +3,38 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import * as BABYLON from '@babylonjs/core';
 import { defineObject } from '../engine.js';
 
 export const desk = defineObject({
 	id: 'desk',
 	name: 'Desk',
 	options: {
-		schema: {},
-		default: {},
+		schema: {
+			topColor: {
+				type: 'color',
+				label: 'Top color',
+			},
+		},
+		default: {
+			topColor: [0, 0, 0],
+		},
 	},
 	placement: 'floor',
-	createInstance: () => {
+	createInstance: ({ options, findMaterial }) => {
+		const topMaterial = findMaterial('__X_BODY__');
+
+		const applyTopColor = () => {
+			const [r, g, b] = options.topColor;
+			topMaterial.albedoColor = new BABYLON.Color3(r, g, b);
+		};
+
+		applyTopColor();
+
 		return {
+			onOptionsUpdated: ([k, v]) => {
+				applyTopColor();
+			},
 			interactions: {},
 		};
 	},