mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-13 15:15:45 +02:00
Code Releases Activity

wip

Browse Source
This commit is contained in:
syuilo
2026-03-26 20:26:27 +09:00
parent 4965429069
commit 7f5858a66f
20 changed files with 153 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
packages/frontend/src/pages/room.add-object-dialog.vue Normal file
View File

@@ -0,0 +1,88 @@
<!--
SPDX-FileCopyrightText: syuilo and misskey-project
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkModalWindow
ref="dialog"
:width="1000"
:height="600"
:scroll="false"
:withOkButton="true"
@close="cancel()"
@ok="ok()"
@closed="emit('closed')"
>
<template #header><i class="ti ti-box"></i> カタログ</template>
<div :class="$style.container">
<div>
<div
v-for="def in OBJECT_DEFS"
:key="def.id"
:class="[$style.catalogItem, { [$style.selected]: selectedId === def.id }]"
@click="selectedId = def.id"
>
<div>{{ def.name }}</div>
</div>
</div>
<canvas ref="canvas" :class="$style.canvas"></canvas>
</div>
</MkModalWindow>
</template>
<script setup lang="ts">
import { ref, useTemplateRef, watch, onMounted, onUnmounted, reactive, nextTick } from 'vue';
import { i18n } from '@/i18n.js';
import MkModalWindow from '@/components/MkModalWindow.vue';
import * as os from '@/os.js';
import { OBJECT_DEFS } from '@/utility/room/object-defs.js';
const emit = defineEmits<{
(ev: 'ok', id: string): void;
(ev: 'cancel'): void;
(ev: 'closed'): void;
}>();
const dialog = useTemplateRef('dialog');
const canvas = useTemplateRef('canvas');
const selectedId = ref<string | null>(null);
function ok() {
if (selectedId.value == null) return;
emit('ok', selectedId.value);
dialog.value?.close();
}
async function cancel() {
emit('cancel');
dialog.value?.close();
}
</script>
<style module>
.container {
height: 100%;
display: grid;
grid-template-columns: 1fr 400px;
}
.catalogItem {
padding: 8px;
border: 1px solid var(--border-color);
border-radius: 4px;
cursor: pointer;
}
.selected {
background-color: var(--accent-color);
color: var(--accent-text-color);
}
.canvas {
width: 100%;
height: 100%;
display: block;
background: #000;
}
</style>

13
packages/frontend/src/pages/room.vue
View File

@@ -625,15 +625,16 @@ function toggleEditMode() {
canvas.value!.focus();
}
function addObject(ev: PointerEvent) {
async function addObject(ev: PointerEvent) {
if (engine.value == null) return;
os.popupMenu(OBJECT_DEFS.map(def => ({
text: def.id,
action: () => {
engine.value?.addObject(def.id);
const { dispose } = await os.popupAsyncWithDialog(import('./room.add-object-dialog.vue').then(x => x.default), {
}, {
ok: async (res) => {
engine.value?.addObject(res);
canvas.value!.focus();
},
})), ev.currentTarget ?? ev.target);
closed: () => dispose(),
});
}
function removeSelectedObject() {

2
packages/frontend/src/utility/room/engine.ts
View File

@@ -157,6 +157,7 @@ type ObjectDef<OpSc extends OptionsSchema = OptionsSchema> = {
isChair?: boolean;
createInstance: (args: {
room: RoomEngine;
scene: BABYLON.Scene;
root: BABYLON.Mesh;
options: Readonly<GetOptionsSchemaValues<OpSc>>;
loaderResult: BABYLON.ISceneLoaderAsyncResult;
@@ -937,6 +938,7 @@ export class RoomEngine {
const objectInstance = def.createInstance({
room: this,
scene: this.scene,
root,
options: args.options,
loaderResult: loaderResult,

4
packages/frontend/src/utility/room/objects/allInOnePc.ts
View File

@@ -46,7 +46,7 @@ export const allInOnePc = defineObject({
},
},
placement: 'top',
createInstance: ({ room, options, findMesh, findMaterial }) => {
createInstance: ({ scene, options, findMesh, findMaterial }) => {
const screenMesh = findMesh('__X_SCREEN__');
const bodyMaterial = findMaterial('__X_BODY__');
@@ -72,7 +72,7 @@ export const allInOnePc = defineObject({
const applyCustomPicture = () => {
if (options.customPicture != null) {
const tex = new BABYLON.Texture(options.customPicture, room.scene, false, false);
const tex = new BABYLON.Texture(options.customPicture, scene, false, false);
tex.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
tex.level = 0.5;

8
packages/frontend/src/utility/room/objects/aquarium.ts
View File

@@ -14,19 +14,19 @@ export const aquarium = defineObject({
default: {},
},
placement: 'top',
createInstance: ({ room, root }) => {
createInstance: ({ scene, root }) => {
return {
onInited: () => {
const noiseTexture = new BABYLON.NoiseProceduralTexture('perlin', 256, room.scene);
const noiseTexture = new BABYLON.NoiseProceduralTexture('perlin', 256, scene);
noiseTexture.animationSpeedFactor = 70;
noiseTexture.persistence = 10;
noiseTexture.brightness = 0.5;
noiseTexture.octaves = 5;
const emitter = new BABYLON.TransformNode('emitter', room.scene);
const emitter = new BABYLON.TransformNode('emitter', scene);
emitter.parent = root;
emitter.position = new BABYLON.Vector3(17/*cm*/, 7/*cm*/, -9/*cm*/);
const ps = new BABYLON.ParticleSystem('', 128, room.scene);
const ps = new BABYLON.ParticleSystem('', 128, scene);
ps.particleTexture = new BABYLON.Texture('/client-assets/room/objects/lava-lamp/bubble.png');
ps.emitter = emitter;
ps.isLocal = true;

4
packages/frontend/src/utility/room/objects/beamLamp.ts
View File

@@ -14,10 +14,10 @@ export const beamLamp = defineObject({
default: {},
},
placement: 'top',
createInstance: ({ root, room }) => {
createInstance: ({ root, scene }) => {
return {
onInited: () => {
const light = new BABYLON.PointLight('beamLampLight', new BABYLON.Vector3(0, 10/*cm*/, 0), room.scene);
const light = new BABYLON.PointLight('beamLampLight', new BABYLON.Vector3(0, 10/*cm*/, 0), scene);
light.parent = root;
light.diffuse = new BABYLON.Color3(1.0, 0.5, 0.2);
light.intensity = 300;

8
packages/frontend/src/utility/room/objects/blind.ts
View File

@@ -102,6 +102,14 @@ export const blind = defineObject({
},
},
},
onOptionsUpdated: ([k, v]) => {
temp.$reset();
switch (k) {
case 'angle': applyAngle(); break;
case 'open': applyOpeningState(); break;
case 'blades': applyOpeningState(); break;
}
},
resetTemporaryState: () => {
temp.$reset();
applyAngle();

12
packages/frontend/src/utility/room/objects/books.ts
View File

@@ -23,16 +23,16 @@ export const books = defineObject({
},
placement: 'top',
mergeMeshes: ['__X_BOOK_1__', '__X_BOOK_2__', '__X_BOOK_3__', '__X_BOOK_4__', '__X_BOOK_5__', '__X_BOOK_6__', '__X_BOOK_7__', '__X_BOOK_8__', '__X_BOOK_9__', '__X_BOOK_10__'],
createInstance: ({ room, options, findMesh, findMaterial }) => {
createInstance: ({ scene, options, findMesh, findMaterial }) => {
const coverMaterial = findMaterial('__X_COVER__');
const applyVariation = () => {
const coverTexture =
options.variation === 'A' ? new BABYLON.Texture('/client-assets/room/objects/books/textures/a.png', room.scene, false, false) :
options.variation === 'B' ? new BABYLON.Texture('/client-assets/room/objects/books/textures/b.png', room.scene, false, false) :
options.variation === 'C' ? new BABYLON.Texture('/client-assets/room/objects/books/textures/c.png', room.scene, false, false) :
options.variation === 'D' ? new BABYLON.Texture('/client-assets/room/objects/books/textures/d.png', room.scene, false, false) :
new BABYLON.Texture('/client-assets/room/objects/books/textures/e.png', room.scene, false, false);
options.variation === 'A' ? new BABYLON.Texture('/client-assets/room/objects/books/textures/a.png', scene, false, false) :
options.variation === 'B' ? new BABYLON.Texture('/client-assets/room/objects/books/textures/b.png', scene, false, false) :
options.variation === 'C' ? new BABYLON.Texture('/client-assets/room/objects/books/textures/c.png', scene, false, false) :
options.variation === 'D' ? new BABYLON.Texture('/client-assets/room/objects/books/textures/d.png', scene, false, false) :
new BABYLON.Texture('/client-assets/room/objects/books/textures/e.png', scene, false, false);
coverMaterial.albedoTexture = coverTexture;
};

6
packages/frontend/src/utility/room/objects/cardboardBox.ts
View File

@@ -22,16 +22,16 @@ export const cardboardBox = defineObject({
},
},
placement: 'top',
createInstance: ({ room, options, root }) => {
createInstance: ({ scene, options, root }) => {
return {
onInited: () => {
const boxMesh = root.getChildMeshes().find(m => m.name === 'Box') as BABYLON.Mesh;
if (options.variation === 'mikan') {
const tex = new BABYLON.Texture('/client-assets/room/objects/cardboard-box/textures/mikan.png', room.scene, false, false);
const tex = new BABYLON.Texture('/client-assets/room/objects/cardboard-box/textures/mikan.png', scene, false, false);
(boxMesh.material as BABYLON.PBRMaterial).albedoTexture = tex;
(boxMesh.material as BABYLON.PBRMaterial).albedoColor = new BABYLON.Color3(1, 1, 1);
} else if (options.variation === 'aizon') {
const tex = new BABYLON.Texture('/client-assets/room/objects/cardboard-box/textures/aizon.png', room.scene, false, false);
const tex = new BABYLON.Texture('/client-assets/room/objects/cardboard-box/textures/aizon.png', scene, false, false);
(boxMesh.material as BABYLON.PBRMaterial).albedoTexture = tex;
(boxMesh.material as BABYLON.PBRMaterial).albedoColor = new BABYLON.Color3(1, 1, 1);
}

4
packages/frontend/src/utility/room/objects/ceilingFanLight.ts
View File

@@ -14,7 +14,7 @@ export const ceilingFanLight = defineObject({
default: {},
},
placement: 'ceiling',
createInstance: ({ room, root }) => {
createInstance: ({ scene, root }) => {
return {
onInited: () => {
const rotor = root.getChildMeshes().find(m => m.name === 'Rotor') as BABYLON.Mesh;
@@ -25,7 +25,7 @@ export const ceilingFanLight = defineObject({
{ frame: 100, value: Math.PI * 2 },
]);
rotor.animations = [anim];
room.scene.beginAnimation(rotor, 0, 100, true);
scene.beginAnimation(rotor, 0, 100, true);
},
interactions: {},
};

4
packages/frontend/src/utility/room/objects/cupNoodle.ts
View File

@@ -15,10 +15,10 @@ export const cupNoodle = defineObject({
default: {},
},
placement: 'top',
createInstance: ({ room, root }) => {
createInstance: ({ scene, root }) => {
return {
onInited: () => {
yuge(room, root, new BABYLON.Vector3(0, 10/*cm*/, 0));
yuge(scene, root, new BABYLON.Vector3(0, 10/*cm*/, 0));
},
interactions: {},
};

4
packages/frontend/src/utility/room/objects/laptopPc.ts
View File

@@ -54,7 +54,7 @@ export const laptopPc = defineObject({
},
},
placement: 'top',
createInstance: ({ room, options, findMesh, findMaterial, findTransformNode }) => {
createInstance: ({ scene, options, findMesh, findMaterial, findTransformNode }) => {
const screenMesh = findMesh('__X_SCREEN__');
const hutaNode = findTransformNode('__X_HUTA__');
@@ -81,7 +81,7 @@ export const laptopPc = defineObject({
const applyCustomPicture = () => {
if (options.customPicture != null) {
const tex = new BABYLON.Texture(options.customPicture, room.scene, false, false);
const tex = new BABYLON.Texture(options.customPicture, scene, false, false);
tex.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
tex.level = 0.5;

14
packages/frontend/src/utility/room/objects/lavaLamp.ts
View File

@@ -13,19 +13,19 @@ export const lavaLamp = defineObject({
default: {},
},
placement: 'top',
createInstance: ({ room, root }) => {
createInstance: ({ scene, root }) => {
return {
onInited: () => {
const light = new BABYLON.PointLight('lavaLampLight', new BABYLON.Vector3(0, 11/*cm*/, 0), room.scene);
const light = new BABYLON.PointLight('lavaLampLight', new BABYLON.Vector3(0, 11/*cm*/, 0), scene);
light.parent = root;
light.diffuse = new BABYLON.Color3(1.0, 0.5, 0.2);
light.intensity = 300;
light.range = 100/*cm*/;
const sphere = BABYLON.MeshBuilder.CreateSphere('lavaLampLightSphere', { diameter: 4/*cm*/ }, room.scene);
const sphere = BABYLON.MeshBuilder.CreateSphere('lavaLampLightSphere', { diameter: 4/*cm*/ }, scene);
sphere.parent = root;
sphere.position = new BABYLON.Vector3(0, 15/*cm*/, 0);
const mat = new BABYLON.StandardMaterial('lavaLampLightMat', room.scene);
const mat = new BABYLON.StandardMaterial('lavaLampLightMat', scene);
mat.emissiveColor = new BABYLON.Color3(1.0, 0.5, 0.2);
mat.alpha = 0.5;
@@ -38,12 +38,12 @@ export const lavaLamp = defineObject({
{ frame: 500, value: 38/*cm*/ },
]);
sphere.animations = [anim];
room.scene.beginAnimation(sphere, 0, 500, true);
scene.beginAnimation(sphere, 0, 500, true);
const emitter = new BABYLON.TransformNode('emitter', room.scene);
const emitter = new BABYLON.TransformNode('emitter', scene);
emitter.parent = root;
emitter.position = new BABYLON.Vector3(0, 10/*cm*/, 0);
const ps = new BABYLON.ParticleSystem('', 32, room.scene);
const ps = new BABYLON.ParticleSystem('', 32, scene);
ps.particleTexture = new BABYLON.Texture('/client-assets/room/objects/lava-lamp/bubble.png');
ps.emitter = emitter;
ps.isLocal = true;

4
packages/frontend/src/utility/room/objects/mug.ts
View File

@@ -15,10 +15,10 @@ export const mug = defineObject({
default: {},
},
placement: 'top',
createInstance: ({ room, root }) => {
createInstance: ({ scene, root }) => {
return {
onInited: () => {
yuge(room, root, new BABYLON.Vector3(0, 5/*cm*/, 0));
yuge(scene, root, new BABYLON.Vector3(0, 5/*cm*/, 0));
},
interactions: {},
};

4
packages/frontend/src/utility/room/objects/pictureFrame.ts
View File

@@ -83,7 +83,7 @@ export const pictureFrame = defineObject({
},
},
placement: 'side',
createInstance: ({ room, root, options, findMaterial, findMesh, meshUpdated }) => {
createInstance: ({ scene, options, findMaterial, findMesh, meshUpdated }) => {
const frameMesh = findMesh('__X_FRAME__');
frameMesh.rotationQuaternion = null;
const matMesh = findMesh('__X_MAT__');
@@ -158,7 +158,7 @@ export const pictureFrame = defineObject({
const applyCustomPicture = () => {
if (options.customPicture != null) {
const tex = new BABYLON.Texture(options.customPicture, room.scene, false, false);
const tex = new BABYLON.Texture(options.customPicture, scene, false, false);
tex.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;

4
packages/frontend/src/utility/room/objects/poster.ts
View File

@@ -44,7 +44,7 @@ export const poster = defineObject({
},
},
placement: 'side',
createInstance: ({ room, root, options, findMaterial, findMesh, findMeshes, meshUpdated }) => {
createInstance: ({ scene, options, findMaterial, findMesh, findMeshes, meshUpdated }) => {
const pictureMesh = findMesh('__X_PICTURE__');
pictureMesh.rotationQuaternion = null;
@@ -86,7 +86,7 @@ export const poster = defineObject({
const applyCustomPicture = () => {
if (options.customPicture != null) {
const tex = new BABYLON.Texture(options.customPicture, room.scene, false, false);
const tex = new BABYLON.Texture(options.customPicture, scene, false, false);
tex.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;

4
packages/frontend/src/utility/room/objects/tabletopPictureFrame.ts
View File

@@ -83,7 +83,7 @@ export const tabletopPictureFrame = defineObject({
},
},
placement: 'top',
createInstance: ({ room, root, options, findMaterial, findMesh, meshUpdated }) => {
createInstance: ({ scene, options, findMaterial, findMesh, meshUpdated }) => {
const frameMesh = findMesh('__X_FRAME__');
frameMesh.rotationQuaternion = null;
const matMesh = findMesh('__X_MAT__');
@@ -163,7 +163,7 @@ export const tabletopPictureFrame = defineObject({
const applyCustomPicture = () => {
if (options.customPicture != null) {
const tex = new BABYLON.Texture(options.customPicture, room.scene, false, false);
const tex = new BABYLON.Texture(options.customPicture, scene, false, false);
tex.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;

4
packages/frontend/src/utility/room/objects/tapestry.ts
View File

@@ -44,7 +44,7 @@ export const tapestry = defineObject({
},
},
placement: 'side',
createInstance: ({ room, root, options, findMaterial, findMesh, findMeshes, meshUpdated }) => {
createInstance: ({ scene, options, findMaterial, findMesh, findMeshes, meshUpdated }) => {
const pictureMesh = findMesh('__X_PICTURE__');
pictureMesh.rotationQuaternion = null;
@@ -90,7 +90,7 @@ export const tapestry = defineObject({
const applyCustomPicture = () => {
if (options.customPicture != null) {
const tex = new BABYLON.Texture(options.customPicture, room.scene, false, false);
const tex = new BABYLON.Texture(options.customPicture, scene, false, false);
tex.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;

4
packages/frontend/src/utility/room/objects/tv.ts
View File

@@ -15,11 +15,11 @@ export const tv = defineObject({
default: {},
},
placement: 'top',
createInstance: ({ room, root }) => {
createInstance: ({ scene, root }) => {
const screenMesh = root.getChildMeshes().find(m => m.name.includes('__TV_SCREEN__')) as BABYLON.Mesh;
screenMesh.markVerticesDataAsUpdatable(BABYLON.VertexBuffer.UVKind, true);
initTv(room, screenMesh);
initTv(scene, screenMesh);
return {
interactions: {},

12
packages/frontend/src/utility/room/utility.ts
View File

@@ -6,11 +6,11 @@
import * as BABYLON from '@babylonjs/core';
import type { RoomEngine } from './engine.js';
export function yuge(room: RoomEngine, mesh: BABYLON.Mesh, offset: BABYLON.Vector3) {
const emitter = new BABYLON.TransformNode('emitter', room.scene);
export function yuge(scene: BABYLON.Scene, mesh: BABYLON.Mesh, offset: BABYLON.Vector3) {
const emitter = new BABYLON.TransformNode('emitter', scene);
emitter.parent = mesh;
emitter.position = offset;
const ps = new BABYLON.ParticleSystem('steamParticleSystem', 8, room.scene);
const ps = new BABYLON.ParticleSystem('steamParticleSystem', 8, scene);
ps.particleTexture = new BABYLON.Texture('/client-assets/room/steam.png');
ps.emitter = emitter;
ps.minEmitBox = new BABYLON.Vector3(-1/*cm*/, 0, -1/*cm*/);
@@ -278,15 +278,15 @@ const TV_PROGRAMS = {
let tvScreenMaterial: BABYLON.StandardMaterial | null = null;
export function initTv(room: RoomEngine, screenMesh: BABYLON.Mesh) {
export function initTv(scene: BABYLON.Scene, screenMesh: BABYLON.Mesh) {
const tvProgramId = 'shopping';
const tvProgram = TV_PROGRAMS[tvProgramId];
if (tvScreenMaterial == null) {
tvScreenMaterial = new BABYLON.StandardMaterial('tvScreenMaterial', room.scene);
tvScreenMaterial = new BABYLON.StandardMaterial('tvScreenMaterial', scene);
tvScreenMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
tvScreenMaterial.ambientColor = new BABYLON.Color3(0, 0, 0);
tvScreenMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
tvScreenMaterial.emissiveTexture = new BABYLON.Texture(`/client-assets/room/tv/${tvProgramId}/${tvProgramId}.png`, room.scene, false, false);
tvScreenMaterial.emissiveTexture = new BABYLON.Texture(`/client-assets/room/tv/${tvProgramId}/${tvProgramId}.png`, scene, false, false);
tvScreenMaterial.emissiveTexture.level = 0.5;
tvScreenMaterial.emissiveColor = new BABYLON.Color3(0.4, 0.4, 0.4);
tvScreenMaterial.freeze();