@pmndrs/viverse 0.2.0 → 0.2.2

package/dist/action/screen-joystick.js

@@ -0,0 +1,120 @@
+import { MoveForwardAction, MoveBackwardAction, MoveLeftAction, MoveRightAction, RunAction, } from './index.js';
+const DefaultDeadZonePx = 24;
+const DefaultRunDistancePx = 46;
+const JoystickRadius = 56;
+export class ScreenJoystickLocomotionActionBindings {
+    abortSignal;
+    root;
+    handle;
+    pointerId;
+    forwardWriter;
+    backwardWriter;
+    leftWriter;
+    rightWriter;
+    runWriter;
+    //options
+    runDistancePx;
+    deadZonePx;
+    constructor(domElement, abortSignal) {
+        this.abortSignal = abortSignal;
+        this.forwardWriter = MoveForwardAction.createWriter(this.abortSignal);
+        this.backwardWriter = MoveBackwardAction.createWriter(this.abortSignal);
+        this.leftWriter = MoveLeftAction.createWriter(this.abortSignal);
+        this.rightWriter = MoveRightAction.createWriter(this.abortSignal);
+        this.runWriter = RunAction.createWriter(this.abortSignal);
+        this.root = document.createElement('div');
+        this.root.className = 'viverse-joystick mobile-only';
+        this.root.style.position = 'absolute';
+        this.root.style.bottom = '24px';
+        this.root.style.left = '24px';
+        this.root.style.width = '112px';
+        this.root.style.height = '112px';
+        this.root.style.borderRadius = '9999px';
+        this.root.style.background = 'rgba(255,255,255,0.2)';
+        this.root.style.pointerEvents = 'auto';
+        this.root.style.touchAction = 'none';
+        this.root.style.userSelect = 'none';
+        this.root.style.setProperty('-webkit-user-select', 'none');
+        this.root.style.setProperty('-webkit-touch-callout', 'none');
+        const parent = domElement.parentElement ?? domElement;
+        parent.appendChild(this.root);
+        this.abortSignal.addEventListener('abort', () => this.root.remove(), { once: true });
+        this.handle = document.createElement('div');
+        this.handle.className = 'viverse-joystick-handle';
+        this.root.appendChild(this.handle);
+        this.handle.style.position = 'absolute';
+        this.handle.style.left = '50%';
+        this.handle.style.top = '50%';
+        this.handle.style.width = '56px';
+        this.handle.style.height = '56px';
+        this.handle.style.borderRadius = '9999px';
+        this.handle.style.background = 'rgba(0,0,0,0.3)';
+        this.handle.style.transform = 'translate(-50%,-50%)';
+        this.handle.style.willChange = 'transform';
+        this.handle.style.pointerEvents = 'none';
+        this.handle.style.touchAction = 'none';
+        this.handle.style.userSelect = 'none';
+        this.handle.style.setProperty('-webkit-user-select', 'none');
+        this.handle.style.setProperty('-webkit-touch-callout', 'none');
+        const onPointerDown = (e) => {
+            if (this.pointerId != null) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            this.root.setPointerCapture(e.pointerId);
+            this.pointerId = e.pointerId;
+            const rect = this.root.getBoundingClientRect();
+            const joyCenterX = rect.left + rect.width / 2;
+            const joyCenterY = rect.top + rect.height / 2;
+            this.updateHandle(e.clientX - joyCenterX, e.clientY - joyCenterY);
+        };
+        const onPointerMove = (e) => {
+            if (this.pointerId == null) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            const rect = this.root.getBoundingClientRect();
+            const joyCenterX = rect.left + rect.width / 2;
+            const joyCenterY = rect.top + rect.height / 2;
+            this.updateHandle(e.clientX - joyCenterX, e.clientY - joyCenterY);
+        };
+        const onPointerEnd = (e) => {
+            if (this.pointerId != e.pointerId) {
+                return;
+            }
+            this.pointerId = undefined;
+            this.root.releasePointerCapture(e.pointerId);
+            e.preventDefault();
+            this.resetHandle();
+        };
+        this.root.addEventListener('pointerdown', onPointerDown, { signal: this.abortSignal });
+        this.root.addEventListener('pointermove', onPointerMove, { signal: this.abortSignal });
+        this.root.addEventListener('pointerup', onPointerEnd, { signal: this.abortSignal });
+        this.root.addEventListener('pointercancel', onPointerEnd, { signal: this.abortSignal });
+    }
+    updateHandle(dx, dy) {
+        const distanceToCenter = Math.hypot(dx, dy) || 1;
+        const clampedX = (dx / distanceToCenter) * Math.min(distanceToCenter, JoystickRadius);
+        const clampedY = (dy / distanceToCenter) * Math.min(distanceToCenter, JoystickRadius);
+        this.handle.style.transform = `translate(-50%,-50%) translate(${clampedX}px, ${clampedY}px)`;
+        const deadZone = this.deadZonePx ?? DefaultDeadZonePx;
+        const runDistance = this.runDistancePx ?? DefaultRunDistancePx;
+        const moveY = distanceToCenter <= deadZone ? 0 : -clampedY / JoystickRadius;
+        const moveX = distanceToCenter <= deadZone ? 0 : clampedX / JoystickRadius;
+        this.forwardWriter.write(Math.max(0, moveY));
+        this.backwardWriter.write(Math.max(0, -moveY));
+        this.leftWriter.write(Math.max(0, -moveX));
+        this.rightWriter.write(Math.max(0, moveX));
+        this.runWriter.write(distanceToCenter > runDistance);
+    }
+    resetHandle() {
+        this.handle.style.transform = 'translate(-50%,-50%)';
+        this.forwardWriter.write(0);
+        this.backwardWriter.write(0);
+        this.leftWriter.write(0);
+        this.rightWriter.write(0);
+        this.runWriter.write(false);
+    }
+}

package/dist/action/screen-jump-button.d.ts

@@ -0,0 +1,6 @@
+export declare const defaultScreenButtonStyles: Partial<CSSStyleDeclaration>;
+export declare const jumpButtonImage = "url(\"data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23444%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpolyline%20points=%2218%2015%2012%209%206%2015%22/%3E%3C/svg%3E\")";
+export declare class ScreenButtonJumpActionBindings {
+    readonly root: HTMLDivElement;
+    constructor(domElement: HTMLElement, abortSignal: AbortSignal);
+}

package/dist/action/screen-jump-button.js

@@ -0,0 +1,32 @@
+import { JumpAction } from './index.js';
+import { PointerButtonActionBinding } from './pointer.js';
+export const defaultScreenButtonStyles = {
+    position: 'absolute',
+    bottom: '32px',
+    right: '126px',
+    minWidth: '64px',
+    height: '64px',
+    borderRadius: '9999px',
+    pointerEvents: 'auto',
+    touchAction: 'none',
+    userSelect: 'none',
+    background: 'rgba(255,255,255,0.3)',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+    backgroundSize: '50%',
+};
+Object.assign(defaultScreenButtonStyles, { '-webkit-user-select': 'none' });
+export const jumpButtonImage = 'url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23444%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpolyline%20points=%2218%2015%2012%209%206%2015%22/%3E%3C/svg%3E")';
+export class ScreenButtonJumpActionBindings {
+    root;
+    constructor(domElement, abortSignal) {
+        const parent = domElement.parentElement ?? domElement;
+        this.root = document.createElement('div');
+        this.root.className = 'viverse-button viverse-jump mobile-only';
+        parent.appendChild(this.root);
+        abortSignal.addEventListener('abort', () => this.root.remove(), { once: true });
+        Object.assign(this.root.style, defaultScreenButtonStyles);
+        new PointerButtonActionBinding(JumpAction, this.root, abortSignal);
+        this.root.addEventListener('pointerdown', (e) => e.stopPropagation(), { signal: abortSignal });
+    }
+}

package/dist/animation/bone-map.d.ts

@@ -0,0 +1,4 @@
+import { VRMHumanBoneName } from '@pixiv/three-vrm';
+import { AnimationClip, Object3D } from 'three';
+export type BoneMap = Record<string, VRMHumanBoneName>;
+export declare function applyBoneMap(clip: AnimationClip, clipScene: Object3D | undefined, boneMap: BoneMap): void;

package/dist/animation/bone-map.js

@@ -0,0 +1,11 @@
+export function applyBoneMap(clip, clipScene, boneMap) {
+    for (const track of clip.tracks) {
+        const [clipBoneName, propertyName] = track.name.split('.');
+        const clipBone = clipScene?.getObjectByName(clipBoneName);
+        const normalizedBoneName = (boneMap?.[clipBoneName] ?? clipBoneName);
+        if (clipBone != null) {
+            clipBone.name = normalizedBoneName;
+        }
+        track.name = `${normalizedBoneName}.${propertyName}`;
+    }
+}