diff --git a/packages/frontend/assets/room/objects/picture-frame/picture-frame.blend b/packages/frontend/assets/room/objects/picture-frame/picture-frame.blend index bc77b1ba5c..ae2a737499 100644 Binary files a/packages/frontend/assets/room/objects/picture-frame/picture-frame.blend and b/packages/frontend/assets/room/objects/picture-frame/picture-frame.blend differ diff --git a/packages/frontend/assets/room/objects/picture-frame/picture-frame.glb b/packages/frontend/assets/room/objects/picture-frame/picture-frame.glb index 35555858a7..799d7e874e 100644 Binary files a/packages/frontend/assets/room/objects/picture-frame/picture-frame.glb and b/packages/frontend/assets/room/objects/picture-frame/picture-frame.glb differ diff --git a/packages/frontend/src/utility/room/objects/pictureFrame.ts b/packages/frontend/src/utility/room/objects/pictureFrame.ts index a5d5a4ab29..ce75e72369 100644 --- a/packages/frontend/src/utility/room/objects/pictureFrame.ts +++ b/packages/frontend/src/utility/room/objects/pictureFrame.ts @@ -8,20 +8,85 @@ import { defineObject } from '../engine.js'; export const pictureFrame = defineObject({ id: 'pictureFrame', - name: 'Picture Frame', + name: 'Rectangular picture frame', options: { schema: { frameColor: { type: 'color', label: 'Frame color', }, + direction: { + type: 'enum', + label: 'Direction', + enum: ['vertical', 'horizontal'], + }, }, default: { frameColor: [0.71, 0.58, 0.39], + direction: 'vertical', }, }, placement: 'side', - createInstance: ({ room, root, options, findMaterial }) => { + mergeMeshes: ['__X_FRAME__'], + createInstance: ({ room, root, options, findMaterial, findMesh }) => { + const frameMesh = findMesh('__X_FRAME__'); + frameMesh.rotationQuaternion = null; + const coverMesh = findMesh('__X_COVER__'); + coverMesh.rotationQuaternion = null; + const pictureMesh = findMesh('__X_PICTURE__'); + pictureMesh.rotationQuaternion = null; + pictureMesh.markVerticesDataAsUpdatable(BABYLON.VertexBuffer.UVKind, true); + + const uvs = pictureMesh.getVerticesData(BABYLON.VertexBuffer.UVKind); + const ax = uvs[6]; + const ay = uvs[7]; + const bx = uvs[2]; + const by = uvs[3]; + const cx = uvs[4]; + const cy = uvs[5]; + const dx = uvs[0]; + const dy = uvs[1]; + + const applyDirection = () => { + if (options.direction === 'vertical') { + frameMesh.rotation.z = 0; + coverMesh.rotation.z = 0; + pictureMesh.rotation.z = 0; + + uvs[6] = ax; + uvs[7] = ay; + uvs[2] = bx; + uvs[3] = by; + uvs[4] = cx; + uvs[5] = cy; + uvs[0] = dx; + uvs[1] = dy; + } else if (options.direction === 'horizontal') { + frameMesh.rotation.z = -Math.PI / 2; + coverMesh.rotation.z = -Math.PI / 2; + pictureMesh.rotation.z = -Math.PI / 2; + + uvs[6] = cy; + uvs[7] = cx; + uvs[2] = dy; + uvs[3] = dx; + uvs[4] = ay; + uvs[5] = ax; + uvs[0] = by; + uvs[1] = bx; + } + + pictureMesh.updateVerticesData(BABYLON.VertexBuffer.UVKind, uvs); + }; + + applyDirection(); + + const tex = new BABYLON.Texture('http://syu-win.local:3000/files/b6cefaba-3093-4c57-a7f8-993dee62c6f7', room.scene, false, false); + + const pictureMaterial = findMaterial('__X_PICTURE__'); + pictureMaterial.albedoColor = new BABYLON.Color3(1, 1, 1); + pictureMaterial.albedoTexture = tex; + const frameMaterial = findMaterial('__X_FRAME__'); const applyFrameColor = () => { @@ -36,7 +101,12 @@ export const pictureFrame = defineObject({ }, onOptionsUpdated: ([k, v]) => { - applyFrameColor(); + if (k === 'frameColor') { + applyFrameColor(); + } + if (k === 'direction') { + applyDirection(); + } }, interactions: {}, };