mirror of
https://github.com/misskey-dev/misskey.git
synced 2026-05-25 15:34:03 +02:00
wip
This commit is contained in:
88
packages/frontend/src/pages/room.add-object-dialog.vue
Normal file
88
packages/frontend/src/pages/room.add-object-dialog.vue
Normal 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>
|
||||||
@@ -625,15 +625,16 @@ function toggleEditMode() {
|
|||||||
canvas.value!.focus();
|
canvas.value!.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
function addObject(ev: PointerEvent) {
|
async function addObject(ev: PointerEvent) {
|
||||||
if (engine.value == null) return;
|
if (engine.value == null) return;
|
||||||
os.popupMenu(OBJECT_DEFS.map(def => ({
|
const { dispose } = await os.popupAsyncWithDialog(import('./room.add-object-dialog.vue').then(x => x.default), {
|
||||||
text: def.id,
|
}, {
|
||||||
action: () => {
|
ok: async (res) => {
|
||||||
engine.value?.addObject(def.id);
|
engine.value?.addObject(res);
|
||||||
canvas.value!.focus();
|
canvas.value!.focus();
|
||||||
},
|
},
|
||||||
})), ev.currentTarget ?? ev.target);
|
closed: () => dispose(),
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeSelectedObject() {
|
function removeSelectedObject() {
|
||||||
|
|||||||
@@ -157,6 +157,7 @@ type ObjectDef<OpSc extends OptionsSchema = OptionsSchema> = {
|
|||||||
isChair?: boolean;
|
isChair?: boolean;
|
||||||
createInstance: (args: {
|
createInstance: (args: {
|
||||||
room: RoomEngine;
|
room: RoomEngine;
|
||||||
|
scene: BABYLON.Scene;
|
||||||
root: BABYLON.Mesh;
|
root: BABYLON.Mesh;
|
||||||
options: Readonly<GetOptionsSchemaValues<OpSc>>;
|
options: Readonly<GetOptionsSchemaValues<OpSc>>;
|
||||||
loaderResult: BABYLON.ISceneLoaderAsyncResult;
|
loaderResult: BABYLON.ISceneLoaderAsyncResult;
|
||||||
@@ -937,6 +938,7 @@ export class RoomEngine {
|
|||||||
|
|
||||||
const objectInstance = def.createInstance({
|
const objectInstance = def.createInstance({
|
||||||
room: this,
|
room: this,
|
||||||
|
scene: this.scene,
|
||||||
root,
|
root,
|
||||||
options: args.options,
|
options: args.options,
|
||||||
loaderResult: loaderResult,
|
loaderResult: loaderResult,
|
||||||
|
|||||||
@@ -46,7 +46,7 @@ export const allInOnePc = defineObject({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
placement: 'top',
|
placement: 'top',
|
||||||
createInstance: ({ room, options, findMesh, findMaterial }) => {
|
createInstance: ({ scene, options, findMesh, findMaterial }) => {
|
||||||
const screenMesh = findMesh('__X_SCREEN__');
|
const screenMesh = findMesh('__X_SCREEN__');
|
||||||
|
|
||||||
const bodyMaterial = findMaterial('__X_BODY__');
|
const bodyMaterial = findMaterial('__X_BODY__');
|
||||||
@@ -72,7 +72,7 @@ export const allInOnePc = defineObject({
|
|||||||
|
|
||||||
const applyCustomPicture = () => {
|
const applyCustomPicture = () => {
|
||||||
if (options.customPicture != null) {
|
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.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
||||||
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
||||||
tex.level = 0.5;
|
tex.level = 0.5;
|
||||||
|
|||||||
@@ -14,19 +14,19 @@ export const aquarium = defineObject({
|
|||||||
default: {},
|
default: {},
|
||||||
},
|
},
|
||||||
placement: 'top',
|
placement: 'top',
|
||||||
createInstance: ({ room, root }) => {
|
createInstance: ({ scene, root }) => {
|
||||||
return {
|
return {
|
||||||
onInited: () => {
|
onInited: () => {
|
||||||
const noiseTexture = new BABYLON.NoiseProceduralTexture('perlin', 256, room.scene);
|
const noiseTexture = new BABYLON.NoiseProceduralTexture('perlin', 256, scene);
|
||||||
noiseTexture.animationSpeedFactor = 70;
|
noiseTexture.animationSpeedFactor = 70;
|
||||||
noiseTexture.persistence = 10;
|
noiseTexture.persistence = 10;
|
||||||
noiseTexture.brightness = 0.5;
|
noiseTexture.brightness = 0.5;
|
||||||
noiseTexture.octaves = 5;
|
noiseTexture.octaves = 5;
|
||||||
|
|
||||||
const emitter = new BABYLON.TransformNode('emitter', room.scene);
|
const emitter = new BABYLON.TransformNode('emitter', scene);
|
||||||
emitter.parent = root;
|
emitter.parent = root;
|
||||||
emitter.position = new BABYLON.Vector3(17/*cm*/, 7/*cm*/, -9/*cm*/);
|
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.particleTexture = new BABYLON.Texture('/client-assets/room/objects/lava-lamp/bubble.png');
|
||||||
ps.emitter = emitter;
|
ps.emitter = emitter;
|
||||||
ps.isLocal = true;
|
ps.isLocal = true;
|
||||||
|
|||||||
@@ -14,10 +14,10 @@ export const beamLamp = defineObject({
|
|||||||
default: {},
|
default: {},
|
||||||
},
|
},
|
||||||
placement: 'top',
|
placement: 'top',
|
||||||
createInstance: ({ root, room }) => {
|
createInstance: ({ root, scene }) => {
|
||||||
return {
|
return {
|
||||||
onInited: () => {
|
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.parent = root;
|
||||||
light.diffuse = new BABYLON.Color3(1.0, 0.5, 0.2);
|
light.diffuse = new BABYLON.Color3(1.0, 0.5, 0.2);
|
||||||
light.intensity = 300;
|
light.intensity = 300;
|
||||||
|
|||||||
@@ -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: () => {
|
resetTemporaryState: () => {
|
||||||
temp.$reset();
|
temp.$reset();
|
||||||
applyAngle();
|
applyAngle();
|
||||||
|
|||||||
@@ -23,16 +23,16 @@ export const books = defineObject({
|
|||||||
},
|
},
|
||||||
placement: 'top',
|
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__'],
|
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 coverMaterial = findMaterial('__X_COVER__');
|
||||||
|
|
||||||
const applyVariation = () => {
|
const applyVariation = () => {
|
||||||
const coverTexture =
|
const coverTexture =
|
||||||
options.variation === 'A' ? new BABYLON.Texture('/client-assets/room/objects/books/textures/a.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', room.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', room.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', room.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', room.scene, false, false);
|
new BABYLON.Texture('/client-assets/room/objects/books/textures/e.png', scene, false, false);
|
||||||
coverMaterial.albedoTexture = coverTexture;
|
coverMaterial.albedoTexture = coverTexture;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -22,16 +22,16 @@ export const cardboardBox = defineObject({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
placement: 'top',
|
placement: 'top',
|
||||||
createInstance: ({ room, options, root }) => {
|
createInstance: ({ scene, options, root }) => {
|
||||||
return {
|
return {
|
||||||
onInited: () => {
|
onInited: () => {
|
||||||
const boxMesh = root.getChildMeshes().find(m => m.name === 'Box') as BABYLON.Mesh;
|
const boxMesh = root.getChildMeshes().find(m => m.name === 'Box') as BABYLON.Mesh;
|
||||||
if (options.variation === 'mikan') {
|
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).albedoTexture = tex;
|
||||||
(boxMesh.material as BABYLON.PBRMaterial).albedoColor = new BABYLON.Color3(1, 1, 1);
|
(boxMesh.material as BABYLON.PBRMaterial).albedoColor = new BABYLON.Color3(1, 1, 1);
|
||||||
} else if (options.variation === 'aizon') {
|
} 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).albedoTexture = tex;
|
||||||
(boxMesh.material as BABYLON.PBRMaterial).albedoColor = new BABYLON.Color3(1, 1, 1);
|
(boxMesh.material as BABYLON.PBRMaterial).albedoColor = new BABYLON.Color3(1, 1, 1);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ export const ceilingFanLight = defineObject({
|
|||||||
default: {},
|
default: {},
|
||||||
},
|
},
|
||||||
placement: 'ceiling',
|
placement: 'ceiling',
|
||||||
createInstance: ({ room, root }) => {
|
createInstance: ({ scene, root }) => {
|
||||||
return {
|
return {
|
||||||
onInited: () => {
|
onInited: () => {
|
||||||
const rotor = root.getChildMeshes().find(m => m.name === 'Rotor') as BABYLON.Mesh;
|
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 },
|
{ frame: 100, value: Math.PI * 2 },
|
||||||
]);
|
]);
|
||||||
rotor.animations = [anim];
|
rotor.animations = [anim];
|
||||||
room.scene.beginAnimation(rotor, 0, 100, true);
|
scene.beginAnimation(rotor, 0, 100, true);
|
||||||
},
|
},
|
||||||
interactions: {},
|
interactions: {},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -15,10 +15,10 @@ export const cupNoodle = defineObject({
|
|||||||
default: {},
|
default: {},
|
||||||
},
|
},
|
||||||
placement: 'top',
|
placement: 'top',
|
||||||
createInstance: ({ room, root }) => {
|
createInstance: ({ scene, root }) => {
|
||||||
return {
|
return {
|
||||||
onInited: () => {
|
onInited: () => {
|
||||||
yuge(room, root, new BABYLON.Vector3(0, 10/*cm*/, 0));
|
yuge(scene, root, new BABYLON.Vector3(0, 10/*cm*/, 0));
|
||||||
},
|
},
|
||||||
interactions: {},
|
interactions: {},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -54,7 +54,7 @@ export const laptopPc = defineObject({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
placement: 'top',
|
placement: 'top',
|
||||||
createInstance: ({ room, options, findMesh, findMaterial, findTransformNode }) => {
|
createInstance: ({ scene, options, findMesh, findMaterial, findTransformNode }) => {
|
||||||
const screenMesh = findMesh('__X_SCREEN__');
|
const screenMesh = findMesh('__X_SCREEN__');
|
||||||
const hutaNode = findTransformNode('__X_HUTA__');
|
const hutaNode = findTransformNode('__X_HUTA__');
|
||||||
|
|
||||||
@@ -81,7 +81,7 @@ export const laptopPc = defineObject({
|
|||||||
|
|
||||||
const applyCustomPicture = () => {
|
const applyCustomPicture = () => {
|
||||||
if (options.customPicture != null) {
|
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.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
||||||
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
||||||
tex.level = 0.5;
|
tex.level = 0.5;
|
||||||
|
|||||||
@@ -13,19 +13,19 @@ export const lavaLamp = defineObject({
|
|||||||
default: {},
|
default: {},
|
||||||
},
|
},
|
||||||
placement: 'top',
|
placement: 'top',
|
||||||
createInstance: ({ room, root }) => {
|
createInstance: ({ scene, root }) => {
|
||||||
return {
|
return {
|
||||||
onInited: () => {
|
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.parent = root;
|
||||||
light.diffuse = new BABYLON.Color3(1.0, 0.5, 0.2);
|
light.diffuse = new BABYLON.Color3(1.0, 0.5, 0.2);
|
||||||
light.intensity = 300;
|
light.intensity = 300;
|
||||||
light.range = 100/*cm*/;
|
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.parent = root;
|
||||||
sphere.position = new BABYLON.Vector3(0, 15/*cm*/, 0);
|
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.emissiveColor = new BABYLON.Color3(1.0, 0.5, 0.2);
|
||||||
|
|
||||||
mat.alpha = 0.5;
|
mat.alpha = 0.5;
|
||||||
@@ -38,12 +38,12 @@ export const lavaLamp = defineObject({
|
|||||||
{ frame: 500, value: 38/*cm*/ },
|
{ frame: 500, value: 38/*cm*/ },
|
||||||
]);
|
]);
|
||||||
sphere.animations = [anim];
|
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.parent = root;
|
||||||
emitter.position = new BABYLON.Vector3(0, 10/*cm*/, 0);
|
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.particleTexture = new BABYLON.Texture('/client-assets/room/objects/lava-lamp/bubble.png');
|
||||||
ps.emitter = emitter;
|
ps.emitter = emitter;
|
||||||
ps.isLocal = true;
|
ps.isLocal = true;
|
||||||
|
|||||||
@@ -15,10 +15,10 @@ export const mug = defineObject({
|
|||||||
default: {},
|
default: {},
|
||||||
},
|
},
|
||||||
placement: 'top',
|
placement: 'top',
|
||||||
createInstance: ({ room, root }) => {
|
createInstance: ({ scene, root }) => {
|
||||||
return {
|
return {
|
||||||
onInited: () => {
|
onInited: () => {
|
||||||
yuge(room, root, new BABYLON.Vector3(0, 5/*cm*/, 0));
|
yuge(scene, root, new BABYLON.Vector3(0, 5/*cm*/, 0));
|
||||||
},
|
},
|
||||||
interactions: {},
|
interactions: {},
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -83,7 +83,7 @@ export const pictureFrame = defineObject({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
placement: 'side',
|
placement: 'side',
|
||||||
createInstance: ({ room, root, options, findMaterial, findMesh, meshUpdated }) => {
|
createInstance: ({ scene, options, findMaterial, findMesh, meshUpdated }) => {
|
||||||
const frameMesh = findMesh('__X_FRAME__');
|
const frameMesh = findMesh('__X_FRAME__');
|
||||||
frameMesh.rotationQuaternion = null;
|
frameMesh.rotationQuaternion = null;
|
||||||
const matMesh = findMesh('__X_MAT__');
|
const matMesh = findMesh('__X_MAT__');
|
||||||
@@ -158,7 +158,7 @@ export const pictureFrame = defineObject({
|
|||||||
|
|
||||||
const applyCustomPicture = () => {
|
const applyCustomPicture = () => {
|
||||||
if (options.customPicture != null) {
|
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.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
||||||
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
||||||
|
|
||||||
|
|||||||
@@ -44,7 +44,7 @@ export const poster = defineObject({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
placement: 'side',
|
placement: 'side',
|
||||||
createInstance: ({ room, root, options, findMaterial, findMesh, findMeshes, meshUpdated }) => {
|
createInstance: ({ scene, options, findMaterial, findMesh, findMeshes, meshUpdated }) => {
|
||||||
const pictureMesh = findMesh('__X_PICTURE__');
|
const pictureMesh = findMesh('__X_PICTURE__');
|
||||||
pictureMesh.rotationQuaternion = null;
|
pictureMesh.rotationQuaternion = null;
|
||||||
|
|
||||||
@@ -86,7 +86,7 @@ export const poster = defineObject({
|
|||||||
|
|
||||||
const applyCustomPicture = () => {
|
const applyCustomPicture = () => {
|
||||||
if (options.customPicture != null) {
|
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.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
||||||
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
||||||
|
|
||||||
|
|||||||
@@ -83,7 +83,7 @@ export const tabletopPictureFrame = defineObject({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
placement: 'top',
|
placement: 'top',
|
||||||
createInstance: ({ room, root, options, findMaterial, findMesh, meshUpdated }) => {
|
createInstance: ({ scene, options, findMaterial, findMesh, meshUpdated }) => {
|
||||||
const frameMesh = findMesh('__X_FRAME__');
|
const frameMesh = findMesh('__X_FRAME__');
|
||||||
frameMesh.rotationQuaternion = null;
|
frameMesh.rotationQuaternion = null;
|
||||||
const matMesh = findMesh('__X_MAT__');
|
const matMesh = findMesh('__X_MAT__');
|
||||||
@@ -163,7 +163,7 @@ export const tabletopPictureFrame = defineObject({
|
|||||||
|
|
||||||
const applyCustomPicture = () => {
|
const applyCustomPicture = () => {
|
||||||
if (options.customPicture != null) {
|
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.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
||||||
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
||||||
|
|
||||||
|
|||||||
@@ -44,7 +44,7 @@ export const tapestry = defineObject({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
placement: 'side',
|
placement: 'side',
|
||||||
createInstance: ({ room, root, options, findMaterial, findMesh, findMeshes, meshUpdated }) => {
|
createInstance: ({ scene, options, findMaterial, findMesh, findMeshes, meshUpdated }) => {
|
||||||
const pictureMesh = findMesh('__X_PICTURE__');
|
const pictureMesh = findMesh('__X_PICTURE__');
|
||||||
pictureMesh.rotationQuaternion = null;
|
pictureMesh.rotationQuaternion = null;
|
||||||
|
|
||||||
@@ -90,7 +90,7 @@ export const tapestry = defineObject({
|
|||||||
|
|
||||||
const applyCustomPicture = () => {
|
const applyCustomPicture = () => {
|
||||||
if (options.customPicture != null) {
|
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.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
||||||
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
tex.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
|
||||||
|
|
||||||
|
|||||||
@@ -15,11 +15,11 @@ export const tv = defineObject({
|
|||||||
default: {},
|
default: {},
|
||||||
},
|
},
|
||||||
placement: 'top',
|
placement: 'top',
|
||||||
createInstance: ({ room, root }) => {
|
createInstance: ({ scene, root }) => {
|
||||||
const screenMesh = root.getChildMeshes().find(m => m.name.includes('__TV_SCREEN__')) as BABYLON.Mesh;
|
const screenMesh = root.getChildMeshes().find(m => m.name.includes('__TV_SCREEN__')) as BABYLON.Mesh;
|
||||||
screenMesh.markVerticesDataAsUpdatable(BABYLON.VertexBuffer.UVKind, true);
|
screenMesh.markVerticesDataAsUpdatable(BABYLON.VertexBuffer.UVKind, true);
|
||||||
|
|
||||||
initTv(room, screenMesh);
|
initTv(scene, screenMesh);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
interactions: {},
|
interactions: {},
|
||||||
|
|||||||
@@ -6,11 +6,11 @@
|
|||||||
import * as BABYLON from '@babylonjs/core';
|
import * as BABYLON from '@babylonjs/core';
|
||||||
import type { RoomEngine } from './engine.js';
|
import type { RoomEngine } from './engine.js';
|
||||||
|
|
||||||
export function yuge(room: RoomEngine, mesh: BABYLON.Mesh, offset: BABYLON.Vector3) {
|
export function yuge(scene: BABYLON.Scene, mesh: BABYLON.Mesh, offset: BABYLON.Vector3) {
|
||||||
const emitter = new BABYLON.TransformNode('emitter', room.scene);
|
const emitter = new BABYLON.TransformNode('emitter', scene);
|
||||||
emitter.parent = mesh;
|
emitter.parent = mesh;
|
||||||
emitter.position = offset;
|
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.particleTexture = new BABYLON.Texture('/client-assets/room/steam.png');
|
||||||
ps.emitter = emitter;
|
ps.emitter = emitter;
|
||||||
ps.minEmitBox = new BABYLON.Vector3(-1/*cm*/, 0, -1/*cm*/);
|
ps.minEmitBox = new BABYLON.Vector3(-1/*cm*/, 0, -1/*cm*/);
|
||||||
@@ -278,15 +278,15 @@ const TV_PROGRAMS = {
|
|||||||
|
|
||||||
let tvScreenMaterial: BABYLON.StandardMaterial | null = null;
|
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 tvProgramId = 'shopping';
|
||||||
const tvProgram = TV_PROGRAMS[tvProgramId];
|
const tvProgram = TV_PROGRAMS[tvProgramId];
|
||||||
if (tvScreenMaterial == null) {
|
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.diffuseColor = new BABYLON.Color3(0, 0, 0);
|
||||||
tvScreenMaterial.ambientColor = new BABYLON.Color3(0, 0, 0);
|
tvScreenMaterial.ambientColor = new BABYLON.Color3(0, 0, 0);
|
||||||
tvScreenMaterial.specularColor = 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.emissiveTexture.level = 0.5;
|
||||||
tvScreenMaterial.emissiveColor = new BABYLON.Color3(0.4, 0.4, 0.4);
|
tvScreenMaterial.emissiveColor = new BABYLON.Color3(0.4, 0.4, 0.4);
|
||||||
tvScreenMaterial.freeze();
|
tvScreenMaterial.freeze();
|
||||||
|
|||||||
Reference in New Issue
Block a user