diff --git a/packages/frontend/assets/room/objects/keyboard/keyboard.blend b/packages/frontend/assets/room/objects/keyboard/keyboard.blend index ab33d134b3..ed7f22b146 100644 Binary files a/packages/frontend/assets/room/objects/keyboard/keyboard.blend and b/packages/frontend/assets/room/objects/keyboard/keyboard.blend differ diff --git a/packages/frontend/assets/room/objects/keyboard/keyboard.glb b/packages/frontend/assets/room/objects/keyboard/keyboard.glb index 15dc69f47a..e3ec37a6c5 100644 Binary files a/packages/frontend/assets/room/objects/keyboard/keyboard.glb and b/packages/frontend/assets/room/objects/keyboard/keyboard.glb differ diff --git a/packages/frontend/src/world/room/objects/keyboard.ts b/packages/frontend/src/world/room/objects/keyboard.ts index 412a5d9e18..b7df58f172 100644 --- a/packages/frontend/src/world/room/objects/keyboard.ts +++ b/packages/frontend/src/world/room/objects/keyboard.ts @@ -3,20 +3,56 @@ * SPDX-License-Identifier: AGPL-3.0-only */ +import * as BABYLON from '@babylonjs/core'; import { defineObject } from '../object.js'; export const keyboard = defineObject({ id: 'keyboard', name: 'Keyboard', options: { - schema: {}, - default: {}, + schema: { + bodyColor: { + type: 'color', + label: 'Body color', + }, + keyColor: { + type: 'color', + label: 'key color', + }, + }, + default: { + bodyColor: [0.3, 0.3, 0.3], + keyColor: [0.2, 0.2, 0.2], + }, }, placement: 'top', hasCollisions: false, canPreMeshesMerging: true, - createInstance: () => { + createInstance: ({ options, model }) => { + const bodyMaterial = model.findMaterial('__X_BODY__'); + const keyMaterial = model.findMaterial('__X_KEY__'); + + const applyBodyColor = () => { + const [r, g, b] = options.bodyColor; + bodyMaterial.albedoColor = new BABYLON.Color3(r, g, b); + }; + + applyBodyColor(); + + const applyKeyColor = () => { + const [r, g, b] = options.keyColor; + keyMaterial.albedoColor = new BABYLON.Color3(r, g, b); + }; + + applyKeyColor(); + return { + onOptionsUpdated: ([k, v]) => { + switch (k) { + case 'bodyColor': applyBodyColor(); break; + case 'keyColor': applyKeyColor(); break; + } + }, interactions: {}, }; },