mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-06-04 10:04:06 +02:00
Code Releases Activity

wip

Browse Source
This commit is contained in:
syuilo
2026-04-28 16:22:08 +09:00
parent dcb834ed41
commit e88188cd6d
4 changed files with 25 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -59,15 +59,9 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
</div> </div>
<div v-if="useVirtualJoystick" :class="$style.joySticks"> <div v-if="useVirtualJoystick" ref="joyStickEl" :class="$style.joyStick" :style="{ '--startXPx': (joyStickStartPos?.x ?? 0) + 'px', '--startYPx': (joyStickStartPos?.y ?? 0) + 'px', '--rPx': joyStickRadiusPx + 'px' }">
<div ref="joyStickLeftEl" :class="$style.joyStickLeft" :style="{ '--startXPx': (joyStickLeftStartPos?.x ?? 0) + 'px', '--startYPx': (joyStickLeftStartPos?.y ?? 0) + 'px', '--rPx': joyStickRadiusPx + 'px' }"> <div v-show="joyStickStartPos != null" :class="$style.joyStickRangeCircle"></div>
<div v-show="joyStickLeftStartPos != null" :class="$style.joyStickRangeCircle"></div> <div v-show="joyStickVec.x !== 0 || joyStickVec.y !== 0" :class="$style.joyStickPuck" :style="{ '--x': joyStickVec.x, '--y': joyStickVec.y }"></div>
<div v-show="joyStickLeftVec.x !== 0 || joyStickLeftVec.y !== 0" :class="$style.joyStickPuck" :style="{ '--x': joyStickLeftVec.x, '--y': joyStickLeftVec.y }"></div>
</div>
<div ref="joyStickRightEl" :class="$style.joyStickRight" :style="{ '--startXPx': (joyStickRightStartPos?.x ?? 0) + 'px', '--startYPx': (joyStickRightStartPos?.y ?? 0) + 'px', '--rPx': joyStickRadiusPx + 'px' }">
<div v-show="joyStickRightStartPos != null" :class="$style.joyStickRangeCircle"></div>
<div v-show="joyStickRightVec.x !== 0 || joyStickRightVec.y !== 0" :class="$style.joyStickPuck" :style="{ '--x': joyStickRightVec.x, '--y': joyStickRightVec.y }"></div>
</div>
</div> </div>
</div> </div>
@@ -218,20 +212,17 @@ const resolutionRaw = prefer.model('world.resolution');
const resolutionAutoValue = computed<number>(() => deviceKind !== 'desktop' ? 0.5 : 1); const resolutionAutoValue = computed<number>(() => deviceKind !== 'desktop' ? 0.5 : 1);
const resolution = computed<number>(() => resolutionRaw.value ?? resolutionAutoValue.value); const resolution = computed<number>(() => resolutionRaw.value ?? resolutionAutoValue.value);
const useVirtualJoystick = isTouchUsing && (deviceKind === 'smartphone' || deviceKind === 'tablet'); //const useVirtualJoystick = isTouchUsing && (deviceKind === 'smartphone' || deviceKind === 'tablet');
//const useVirtualJoystick = true; const useVirtualJoystick = true;
const wasdVec = { x: 0, y: 0 }; const wasdVec = { x: 0, y: 0 };
const pointerVec = { x: 0, y: 0 }; const pointerVec = { x: 0, y: 0 };
let isDashing = false; let isDashing = false;
const joyStickRadiusPx = 100; const joyStickRadiusPx = 100;
const joyStickLeftEl = useTemplateRef('joyStickLeftEl'); const joyStickEl = useTemplateRef('joyStickEl');
const joyStickRightEl = useTemplateRef('joyStickRightEl'); const joyStickVec = ref({ x: 0, y: 0 });
const joyStickLeftVec = ref({ x: 0, y: 0 }); const joyStickStartPos = ref<{ x: number; y: number } | null>(null);
const joyStickRightVec = ref({ x: 0, y: 0 });
const joyStickLeftStartPos = ref<{ x: number; y: number } | null>(null);
const joyStickRightStartPos = ref<{ x: number; y: number } | null>(null);
const data = localStorage.getItem('roomData') != null ? JSON.parse(localStorage.getItem('roomData')!) : { const data = localStorage.getItem('roomData') != null ? JSON.parse(localStorage.getItem('roomData')!) : {
heya: { heya: {
@@ -322,30 +313,18 @@ onMounted(async () => {
// } // }
//}); //});
if (joyStickLeftEl.value != null && joyStickRightEl.value != null) { if (joyStickEl.value != null) {
const joyStickLeft = new Joystick(joyStickLeftEl.value!, { radiusPx: joyStickRadiusPx }); const joyStick = new Joystick(joyStickEl.value!, { radiusPx: joyStickRadiusPx });
joyStickLeft.on('start', (vector) => { joyStick.on('start', (vector) => {
joyStickLeftStartPos.value = vector; joyStickStartPos.value = vector;
}); });
joyStickLeft.on('end', () => { joyStick.on('end', () => {
joyStickLeftStartPos.value = null; joyStickStartPos.value = null;
}); });
joyStickLeft.on('updateVector', (vector) => { joyStick.on('updateVector', (vector) => {
joyStickLeftVec.value = vector; joyStickVec.value = vector;
controller.setCameraJoystickMoveVector(vector); controller.setCameraJoystickMoveVector(vector);
}); });
const joyStickRight = new Joystick(joyStickRightEl.value!, { radiusPx: joyStickRadiusPx });
joyStickRight.on('start', (vector) => {
joyStickRightStartPos.value = vector;
});
joyStickRight.on('end', () => {
joyStickRightStartPos.value = null;
});
joyStickRight.on('updateVector', (vector) => {
joyStickRightVec.value = vector;
controller.setCameraJoystickRotateVector(vector);
});
} }
canvas.value!.addEventListener('keydown', (ev) => { canvas.value!.addEventListener('keydown', (ev) => {
@@ -700,20 +679,15 @@ definePage(() => ({
} }
} }
.joySticks { .joyStick {
display: flex;
width: 100%;
}
.joyStickLeft, .joyStickRight {
position: relative; position: relative;
flex: 1; width: 50%;
height: 100px; height: 100px;
box-sizing: border-box; box-sizing: border-box;
padding: 8px; padding: 8px;
} }
.joyStickLeft::before, .joyStickRight::before { .joyStick::before {
content: ''; content: '';
display: block; display: block;
width: 100%; width: 100%;

10
packages/frontend/src/world/room/controller.ts
View File

@@ -185,6 +185,7 @@ export class RoomController {
private onCanvasPointerdown(ev: PointerEvent) { private onCanvasPointerdown(ev: PointerEvent) {
this.pointerDownPosition = { x: ev.offsetX, y: ev.offsetY }; this.pointerDownPosition = { x: ev.offsetX, y: ev.offsetY };
this.canvas!.setPointerCapture(ev.pointerId);
} }
private onCanvasPointerup(ev: PointerEvent) { private onCanvasPointerup(ev: PointerEvent) {
@@ -201,6 +202,7 @@ export class RoomController {
} }
} }
this.pointerDownPosition = null; this.pointerDownPosition = null;
this.canvas!.releasePointerCapture(ev.pointerId);
} }
public async reset(roomState?: RoomState | null, options?: RoomControllerOptions | null, canvas?: HTMLCanvasElement | null) { public async reset(roomState?: RoomState | null, options?: RoomControllerOptions | null, canvas?: HTMLCanvasElement | null) {
@@ -256,14 +258,6 @@ export class RoomController {
} }
} }
public setCameraJoystickRotateVector(vec: { x: number; y: number }) {
if (this.worker != null) {
this.worker.postMessage({ type: 'call', fn: 'cameraJoystickRotate', args: [vec] });
} else if (this.engine != null) {
this.engine.cameraJoystickRotate(vec);
}
}
public enterEditMode() { public enterEditMode() {
if (this.worker != null) { if (this.worker != null) {
this.worker.postMessage({ type: 'call', fn: 'enterEditMode' }); this.worker.postMessage({ type: 'call', fn: 'enterEditMode' });

12
packages/frontend/src/world/room/engine.ts
View File

@@ -14,7 +14,7 @@
import * as BABYLON from '@babylonjs/core'; import * as BABYLON from '@babylonjs/core';
import { registerBuiltInLoaders } from '@babylonjs/loaders/dynamic'; import { registerBuiltInLoaders } from '@babylonjs/loaders/dynamic';
import { EventEmitter } from 'eventemitter3'; import { EventEmitter } from 'eventemitter3';
import { TIME_MAP, scaleMorph, camelToKebab, cm, WORLD_SCALE, getMeshesBoundingBox, Timer, getYRotationDirection, FreeCameraVirtualJoystickInput, FreeCameraManualInput } from '../utility.js'; import { TIME_MAP, scaleMorph, camelToKebab, cm, WORLD_SCALE, getMeshesBoundingBox, Timer, getYRotationDirection, FreeCameraManualInput } from '../utility.js';
import { getObjectDef } from './object-defs.js'; import { getObjectDef } from './object-defs.js';
import { findMaterial, ModelManager, SYSTEM_HEYA_MESH_NAMES, SYSTEM_MESH_NAMES } from './utility.js'; import { findMaterial, ModelManager, SYSTEM_HEYA_MESH_NAMES, SYSTEM_MESH_NAMES } from './utility.js';
import { SimpleHeyaManager } from './heya.js'; import { SimpleHeyaManager } from './heya.js';
@@ -301,9 +301,9 @@ export class RoomEngine extends EventEmitter<RoomEngineEvents> {
this.camera.inputs.clear(); this.camera.inputs.clear();
if (options.useVirtualJoystick) { if (options.useVirtualJoystick) {
this.camera.inputs.add(new FreeCameraVirtualJoystickInput({ this.camera.inputs.add(new FreeCameraManualInput({
moveSensitivity: 0.015 * WORLD_SCALE, moveSensitivity: 0.015 * WORLD_SCALE,
rotationSensitivity: 0.01, rotationSensitivity: 0.0005,
})); }));
this.camera.inertia = 0.75; this.camera.inertia = 0.75;
} else { } else {
@@ -612,11 +612,7 @@ export class RoomEngine extends EventEmitter<RoomEngineEvents> {
} }
public cameraJoystickMove(vector: { x: number; y: number; }) { public cameraJoystickMove(vector: { x: number; y: number; }) {
(this.camera.inputs.attached.joystick as FreeCameraVirtualJoystickInput).setJoystickMoveVector(vector); (this.camera.inputs.attached.manual as FreeCameraManualInput).setMoveVector(vector);
}
public cameraJoystickRotate(vector: { x: number; y: number; }) {
(this.camera.inputs.attached.joystick as FreeCameraVirtualJoystickInput).setJoystickRotationVector(vector);
} }
public selectObject(objectId: string | null) { public selectObject(objectId: string | null) {

49
packages/frontend/src/world/utility.ts
View File

@@ -618,55 +618,6 @@ export function getRgb(hex: string | number): [number, number, number] | null {
return m.map(x => parseInt(x, 16) / 255) as [number, number, number]; return m.map(x => parseInt(x, 16) / 255) as [number, number, number];
} }
export class FreeCameraVirtualJoystickInput implements BABYLON.ICameraInput<BABYLON.FreeCamera> {
public camera: BABYLON.FreeCamera;
private moveSensitivity: number;
private rotationSensitivity: number;
private moveVector = BABYLON.Vector3.Zero();
private rotationVecX = 0;
private rotationVecY = 0;
constructor(options: {
moveSensitivity?: number;
rotationSensitivity?: number;
}) {
this.moveSensitivity = options.moveSensitivity ?? 0.01;
this.rotationSensitivity = options.rotationSensitivity ?? 0.01;
}
getClassName = () => this.constructor.name;
getSimpleName = () => 'joystick';
attachControl(noPreventDefault) {
}
detachControl() {
}
public setJoystickMoveVector(vec: { x: number; y: number }) {
this.moveVector = new BABYLON.Vector3(vec.x, 0, -vec.y).scale(this.moveSensitivity);
}
public setJoystickRotationVector(vec: { x: number; y: number }) {
let directionAdjust = 1;
if (this.camera.getScene().useRightHandedSystem) directionAdjust *= -1;
if (this.camera.parent && this.camera.parent._getWorldMatrixDeterminant() < 0) directionAdjust *= -1;
this.rotationVecX = vec.y * this.rotationSensitivity * directionAdjust;
this.rotationVecY = vec.x * this.rotationSensitivity * directionAdjust;
}
checkInputs() {
this.camera.cameraRotation.y += this.rotationVecY;
this.camera.cameraRotation.x += this.rotationVecX;
this.camera.cameraDirection.addInPlace(
BABYLON.Vector3.TransformCoordinates(this.moveVector, BABYLON.Matrix.RotationY(this.camera.rotation.y)),
);
}
}
export class FreeCameraManualInput implements BABYLON.ICameraInput<BABYLON.FreeCamera> { export class FreeCameraManualInput implements BABYLON.ICameraInput<BABYLON.FreeCamera> {
public camera: BABYLON.FreeCamera; public camera: BABYLON.FreeCamera;
private moveSensitivity: number; private moveSensitivity: number;