This commit is contained in:
syuilo
2026-02-19 19:21:18 +09:00
parent d01b3036d6
commit cd9612e664
2 changed files with 38 additions and 19 deletions

View File

@@ -7,6 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.root" class="_pageScrollable">
<div :class="$style.screen">
<canvas ref="canvas" :class="$style.canvas" @keydown="onKeydown" @wheel="onWheel"></canvas>
<div v-if="engine != null" class="_buttonsCenter" :class="$style.overlayControls">
<template v-if="engine.isEditMode.value">
<MkButton v-if="engine.ui.isGrabbing" @click="endGrabbing">Put (E)</MkButton>
@@ -22,7 +23,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton inline @click="interaction.fn()">{{ interaction.label }}{{ interaction.isPrimary ? ' (E)' : '' }}</MkButton>
</template>
</div>
<div v-if="engine != null && engine.isEditMode.value && engine.selected.value != null" class="_panel" :class="$style.overlayObjectInfoPanel">
{{ engine.selected.value.objectId }}
</div>
</div>
<div v-if="engine != null" class="_buttons" :class="$style.controls">
<!--<MkButton v-for="action in actions" :key="action.key" @click="action.fn">{{ action.label }}{{ hotkeyToLabel(action.hotkey) }}</MkButton>-->
<MkButton @click="toggleLight">Toggle Light</MkButton>
@@ -116,8 +122,8 @@ function onKeydown(ev: KeyboardEvent) {
} else {
beginSelectedInstalledObjectGrabbing();
}
} else if (engine.value.selectedObjectId.value != null) {
engine.value.interact(engine.value.selectedObjectId.value);
} else if (engine.value.selected.value != null) {
engine.value.interact(engine.value.selected.value.objectId);
}
} else if (ev.code === 'KeyR') {
ev.preventDefault();
@@ -425,15 +431,14 @@ onMounted(() => {
window.addEventListener('resize', resize);
watch(engine.value.selectedObjectId, (v) => {
watch(engine.value.selected, (v) => {
if (v == null) {
interacions.value = [];
} else {
const obji = engine.value.objectInstances.get(v)!;
interacions.value = Object.entries(obji.interactions).map(([interactionId, interactionInfo]) => ({
interacions.value = Object.entries(v.objectInstance.interactions).map(([interactionId, interactionInfo]) => ({
id: interactionId,
label: interactionInfo.label,
isPrimary: obji.primaryInteraction === interactionId,
isPrimary: v.objectInstance.primaryInteraction === interactionId,
fn: interactionInfo.fn,
}));
}
@@ -546,4 +551,12 @@ definePage(() => ({
z-index: 1;
width: 100%;
}
.overlayObjectInfoPanel {
position: absolute;
top: 8px;
right: 8px;
z-index: 1;
padding: 16px;
}
</style>

View File

@@ -25,7 +25,7 @@ import { registerBuiltInLoaders } from '@babylonjs/loaders/dynamic';
import { BoundingBoxRenderer } from '@babylonjs/core/Rendering/boundingBoxRenderer';
import { GridMaterial } from '@babylonjs/materials';
import { ShowInspector } from '@babylonjs/inspector';
import { reactive, ref, watch } from 'vue';
import { reactive, ref, shallowRef, watch } from 'vue';
import { genId } from '../id.js';
import { getObjectDef } from './object-defs.js';
import { HorizontalCameraKeyboardMoveInput } from './utility.js';
@@ -170,7 +170,11 @@ export class RoomEngine {
onCancel?: () => void;
onDone?: () => void;
} | null = null;
public selectedObjectId = ref<string | null>(null);
public selected = shallowRef<{
objectId: string;
objectMesh: BABYLON.Mesh;
objectInstance: RoomObjectInstance<any>;
} | null>(null);
private time: 0 | 1 | 2 = 0; // 0: 昼, 1: 夕, 2: 夜
private roomCollisionMeshes: BABYLON.AbstractMesh[] = [];
public roomState: RoomState;
@@ -526,14 +530,12 @@ export class RoomEngine {
}
public selectObject(objectId: string | null) {
if (this.selectedObjectId.value != null) {
const prevMesh = this.objectMeshs.get(this.selectedObjectId.value);
if (prevMesh != null) {
for (const om of prevMesh.getChildMeshes()) {
om.renderOutline = false;
}
if (this.selected.value != null) {
const prevMesh = this.selected.value.objectMesh;
for (const om of prevMesh.getChildMeshes()) {
om.renderOutline = false;
}
this.selectedObjectId.value = null;
this.selected.value = null;
}
if (objectId != null) {
@@ -542,7 +544,11 @@ export class RoomEngine {
for (const om of mesh.getChildMeshes()) {
om.renderOutline = true;
}
this.selectedObjectId.value = objectId;
this.selected.value = {
objectId,
objectMesh: mesh,
objectInstance: this.objectInstances.get(objectId)!,
};
}
}
}
@@ -856,7 +862,7 @@ export class RoomEngine {
this.shadowGenerator2.addShadowCaster(mesh);
}
mesh.renderOutline = this.selectedObjectId.value === args.id;
mesh.renderOutline = this.selected.value?.objectId === args.id;
mesh.outlineWidth = 0.003;
mesh.outlineColor = new BABYLON.Color3(1, 0, 0);
//if (mesh.material) (mesh.material as BABYLON.PBRMaterial).ambientColor = new BABYLON.Color3(0.2, 0.2, 0.2);
@@ -895,9 +901,9 @@ export class RoomEngine {
}
public beginSelectedInstalledObjectGrabbing() {
if (this.selectedObjectId.value == null) return;
if (this.selected.value == null) return;
const selectedObject = this.objectMeshs.get(this.selectedObjectId.value)!;
const selectedObject = this.selected.value.objectMesh;
for (const om of selectedObject.getChildMeshes()) {
om.renderOutline = false;
}