@pmndrs/viverse 0.1.16 → 0.1.18

package/dist/animation/index.js

@@ -5,10 +5,8 @@ import { loadVrmModelMixamoAnimations as loadModelMixamoAnimations } from './mix
 import { scaleAnimationClipTime, trimAnimationClip } from './utils.js';
 import { loadVrmModelVrmaAnimations } from './vrma.js';
 import { cached } from '../utils.js';
-const parentWorldVector = new Vector3();
 const restRotationInverse = new Quaternion();
 const parentRestWorldRotation = new Quaternion();
-const parentRestWorldRotationInverse = new Quaternion();
 const quaternion = new Quaternion();
 const vector = new Vector3();
 const nonVrmRotationOffset = new Quaternion().setFromEuler(new Euler(0, Math.PI, 0));
@@ -18,7 +16,9 @@ export function fixModelAnimationClip(model, clip, clipScene, removeXZMovement,
         throw new Error('Failed to determine hips bone name for VRM animation. Please check the bone map or animation file.');
     }
     const clipSceneHips = clipScene.getObjectByName(hipsBoneName);
-    const vrmHipsPosition = model instanceof VRM ? model.humanoid.normalizedRestPose.hips?.position : clipSceneHips?.position;
+    const vrmHipsPosition = model instanceof VRM
+        ? model.humanoid.normalizedRestPose.hips?.position
+        : model.scene.getObjectByName('hips')?.position.toArray();
     if (clipSceneHips == null || vrmHipsPosition == null) {
         throw new Error('Failed to load VRM animation: missing animation hips object or VRM hips position.');
     }
@@ -32,14 +32,18 @@ export function fixModelAnimationClip(model, clip, clipScene, removeXZMovement,
         const vrmBoneName = boneMap?.[boneName] ?? boneName;
         const vrmNodeName = model instanceof VRM ? model.humanoid.getNormalizedBoneNode(vrmBoneName)?.name : vrmBoneName;
         const bone = clipScene.getObjectByName(boneName);
-        if (vrmNodeName == null || bone == null || bone.parent == null) {
+        if (vrmNodeName == null || bone == null) {
             continue;
         }
-        bone.getWorldQuaternion(restRotationInverse).invert();
-        bone.parent.getWorldQuaternion(parentRestWorldRotation);
-        parentRestWorldRotationInverse.copy(parentRestWorldRotation).invert();
-        bone.parent.getWorldPosition(parentWorldVector);
         if (track instanceof QuaternionKeyframeTrack) {
+            if (bone.parent != null) {
+                bone.getWorldQuaternion(restRotationInverse).invert();
+                bone.parent.getWorldQuaternion(parentRestWorldRotation);
+            }
+            else {
+                restRotationInverse.identity();
+                parentRestWorldRotation.identity();
+            }
             // Store rotations of rest-pose.
             for (let i = 0; i < track.values.length; i += 4) {
                 quaternion.fromArray(track.values, i);

package/dist/camera.d.ts

@@ -56,7 +56,7 @@ export type SimpleCharacterCameraBehaviorOptions = {
     } | boolean;
 } | boolean;
 export declare class SimpleCharacterCameraBehavior {
-    camera: Object3D;
+    getCamera: () => Object3D;
     character: SimpleCharacter;
     private readonly raycast?;
     rotationPitch: number;
@@ -64,7 +64,7 @@ export declare class SimpleCharacterCameraBehavior {
     zoomDistance: number;
     private collisionFreeZoomDistance;
     private firstUpdate;
-    constructor(camera: Object3D, character: SimpleCharacter, raycast?: ((ray: Ray, far: number) => number | undefined) | undefined);
+    constructor(getCamera: () => Object3D, character: SimpleCharacter, raycast?: ((ray: Ray, far: number) => number | undefined) | undefined);
     private setRotationFromDelta;
     private setDistanceFromDelta;
     private computeCharacterBaseOffset;

package/dist/camera.js

@@ -12,7 +12,7 @@ const characterWorldPosition = new Vector3();
 const euler = new Euler();
 const rayHelper = new Ray();
 export class SimpleCharacterCameraBehavior {
-    camera;
+    getCamera;
     character;
     raycast;
     rotationPitch = (-20 * Math.PI) / 180;
@@ -21,15 +21,15 @@ export class SimpleCharacterCameraBehavior {
     //internal state
     collisionFreeZoomDistance = this.zoomDistance;
     firstUpdate = true;
-    constructor(camera, character, raycast) {
-        this.camera = camera;
+    constructor(getCamera, character, raycast) {
+        this.getCamera = getCamera;
         this.character = character;
         this.raycast = raycast;
     }
     setRotationFromDelta(delta, rotationOptions) {
         if (delta.lengthSq() < 0.0001) {
             // use current camera rotation if very close to target
-            euler.setFromQuaternion(this.camera.quaternion, 'YXZ');
+            euler.setFromQuaternion(this.getCamera().quaternion, 'YXZ');
             this.rotationPitch = euler.x;
             this.rotationYaw = euler.y;
             return;
@@ -76,7 +76,7 @@ export class SimpleCharacterCameraBehavior {
         this.computeCharacterBaseOffset(chracterBaseOffsetHelper, options.characterBaseOffset);
         this.character.getWorldPosition(characterWorldPosition);
         characterWorldPosition.add(chracterBaseOffsetHelper);
-        this.camera.getWorldPosition(deltaHelper);
+        this.getCamera().getWorldPosition(deltaHelper);
         deltaHelper.sub(characterWorldPosition);
         // apply rotation input to rotationYaw and rotationPitch if not disabled or first update
         let rotationOptions = options.rotation ?? true;
@@ -92,8 +92,8 @@ export class SimpleCharacterCameraBehavior {
             this.setRotationFromDelta(deltaHelper, typeof rotationOptions === 'boolean' ? {} : rotationOptions);
         }
         // apply yaw and pitch to camera rotation
-        this.camera.rotation.set(this.rotationPitch, this.rotationYaw, 0, 'YXZ');
-        rayHelper.direction.set(0, 0, 1).applyEuler(this.camera.rotation);
+        this.getCamera().rotation.set(this.rotationPitch, this.rotationYaw, 0, 'YXZ');
+        rayHelper.direction.set(0, 0, 1).applyEuler(this.getCamera().rotation);
         rayHelper.origin.copy(characterWorldPosition);
         // apply zoom input to zoomDistance if not disabled or first update
         let zoomOptions = options.zoom ?? true;
@@ -126,12 +126,12 @@ export class SimpleCharacterCameraBehavior {
         }
         // Calculate camera position using spherical coordinates from euler
         sphericalOffset.set(0, 0, this.collisionFreeZoomDistance);
-        sphericalOffset.applyEuler(this.camera.rotation);
+        sphericalOffset.applyEuler(this.getCamera().rotation);
         // Get target position with offset (reuse helper vector)
         this.character.getWorldPosition(characterWorldPosition);
         this.computeCharacterBaseOffset(chracterBaseOffsetHelper, options.characterBaseOffset);
         characterWorldPosition.add(chracterBaseOffsetHelper);
         // Set camera position relative to target
-        this.camera.position.copy(characterWorldPosition).add(sphericalOffset);
+        this.getCamera().position.copy(characterWorldPosition).add(sphericalOffset);
     }
 }

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { extractProxy, getIsMobileMediaQuery, isMobile } from './utils.js';
 export * from './input/index.js';
 export * from './camera.js';
 export * from './physics/index.js';

package/dist/index.js

@@ -1,3 +1,4 @@
+export { extractProxy, getIsMobileMediaQuery, isMobile } from './utils.js';
 export * from './input/index.js';
 export * from './camera.js';
 export * from './physics/index.js';
@@ -5,3 +6,16 @@ export * from './animation/index.js';
 export * from './material.js';
 export * from './simple-character.js';
 export * from './model/index.js';
+(function injectMobileClassStyle() {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const STYLE_ID = 'viverse-mobile-class-style';
+    if (document.getElementById(STYLE_ID)) {
+        return;
+    }
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `.mobile-only{display:none;}@media (hover: none) and (pointer: coarse){.mobile-only{display:unset;}}`;
+    document.head.appendChild(style);
+})();

package/dist/input/index.d.ts

@@ -1,16 +1,16 @@
 export declare class InputSystem {
-    enabled: boolean;
     private readonly inputs;
     constructor(domElement: HTMLElement, inputs: ReadonlyArray<Input | {
-        new (element: HTMLElement): Input;
-    }>);
+        new (element: HTMLElement, options?: {}): Input;
+    }>, options?: {});
     add(input: Input): void;
     remove(input: Input): void;
-    destroy(): void;
+    dispose(): void;
     get<T>(field: InputField<T>): T;
 }
 export type InputField<T> = {
     default: T;
+    combine: (v1: any, v2: any) => T;
 };
 export declare const MoveForwardField: InputField<number>;
 export declare const MoveBackwardField: InputField<number>;
@@ -23,8 +23,10 @@ export declare const DeltaYawField: InputField<number>;
 export declare const DeltaPitchField: InputField<number>;
 export interface Input {
     get<T>(field: InputField<T>): T | undefined;
-    destroy?(): void;
+    dispose?(): void;
 }
 export * from './pointer-lock.js';
 export * from './pointer-capture.js';
 export * from './keyboard.js';
+export * from './screen-joystick.js';
+export * from './screen-jump-button.js';

package/dist/input/index.js

@@ -1,8 +1,7 @@
 export class InputSystem {
-    enabled = true;
     inputs;
-    constructor(domElement, inputs) {
-        this.inputs = inputs.map((input) => (typeof input === 'function' ? new input(domElement) : input));
+    constructor(domElement, inputs, options) {
+        this.inputs = inputs.map((input) => (typeof input === 'function' ? new input(domElement, options) : input));
     }
     add(input) {
         this.inputs.push(input);
@@ -14,51 +13,64 @@ export class InputSystem {
         }
         this.inputs.splice(index, 1);
     }
-    destroy() {
-        this.inputs.forEach((input) => input.destroy?.());
+    dispose() {
+        this.inputs.forEach((input) => input.dispose?.());
         this.inputs.length = 0;
     }
     get(field) {
-        if (!this.enabled) {
-            return field.default;
-        }
+        let current;
         for (const input of this.inputs) {
             const result = input.get(field);
-            if (result === undefined) {
+            if (result == null) {
+                continue;
+            }
+            if (current == undefined) {
+                current = result;
                 continue;
             }
-            return result;
+            current = field.combine(current, result);
         }
-        return field.default;
+        return current ?? field.default;
     }
 }
 export const MoveForwardField = {
     default: 0,
+    combine: Math.max,
 };
 export const MoveBackwardField = {
     default: 0,
+    combine: Math.max,
 };
 export const MoveLeftField = {
     default: 0,
+    combine: Math.max,
 };
 export const MoveRightField = {
     default: 0,
+    combine: Math.max,
 };
 export const LastTimeJumpPressedField = {
     default: null,
+    combine: (v1, v2) => (v1 == null && v2 == null ? null : Math.min(v1 ?? Infinity, v2 ?? Infinity)),
 };
 export const RunField = {
     default: false,
+    combine: (v1, v2) => v1 || v2,
 };
 export const DeltaZoomField = {
     default: 0,
+    combine: Math.max,
 };
 export const DeltaYawField = {
     default: 0,
+    combine: Math.max,
 };
 export const DeltaPitchField = {
     default: 0,
+    combine: Math.max,
 };
 export * from './pointer-lock.js';
 export * from './pointer-capture.js';
 export * from './keyboard.js';
+export * from './screen-joystick.js';
+export * from './screen-jump-button.js';

package/dist/input/keyboard.d.ts

@@ -1,8 +1,17 @@
 import { Input, InputField } from './index.js';
+export type LocomotionKeyboardInputOptions = {
+    keyboardMoveForwardKeys?: Array<string>;
+    keyboardMoveBackwardKeys?: Array<string>;
+    keyboardMoveLeftKeys?: Array<string>;
+    keyboardMoveRightKeys?: Array<string>;
+    keyboardRunKeys?: Array<string>;
+    keyboardJumpKeys?: Array<string>;
+};
 export declare class LocomotionKeyboardInput implements Input {
+    private readonly options;
     private readonly abortController;
     private readonly keyState;
-    constructor(domElement: HTMLElement);
+    constructor(domElement: HTMLElement, options?: LocomotionKeyboardInputOptions);
     get<T>(field: InputField<T>): T | undefined;
-    destroy(): void;
+    dispose(): void;
 }

package/dist/input/keyboard.js

@@ -1,13 +1,16 @@
 import { MoveForwardField, MoveBackwardField, MoveLeftField, MoveRightField, LastTimeJumpPressedField, RunField, } from './index.js';
-const MoveForwardKeys = ['KeyW'];
-const MoveBackwardKeys = ['KeyS'];
-const MoveLeftKeys = ['KeyA'];
-const MoveRightKeys = ['KeyD'];
-const RunKeys = ['ShiftRight', 'ShiftLeft'];
+const DefaultMoveForwardKeys = ['KeyW'];
+const DefaultMoveBackwardKeys = ['KeyS'];
+const DefaultMoveLeftKeys = ['KeyA'];
+const DefaultMoveRightKeys = ['KeyD'];
+const DefaultRunKeys = ['ShiftRight', 'ShiftLeft'];
+const DefaultJumpKeys = ['Space'];
 export class LocomotionKeyboardInput {
+    options;
     abortController = new AbortController();
     keyState = new Map();
-    constructor(domElement) {
+    constructor(domElement, options = {}) {
+        this.options = options;
         domElement.tabIndex = 0;
         domElement.addEventListener('keydown', (event) => {
             let state = this.keyState.get(event.code);
@@ -40,24 +43,28 @@ export class LocomotionKeyboardInput {
     }
     get(field) {
         if (field === LastTimeJumpPressedField) {
-            return (this.keyState.get('Space')?.pressTime ?? null);
+            const jumpKeys = this.options.keyboardJumpKeys ?? DefaultJumpKeys;
+            const pressed = jumpKeys
+                .map((key) => this.keyState.get(key)?.pressTime ?? null)
+                .filter((t) => t != null);
+            return (pressed.length > 0 ? Math.max(...pressed) : null);
         }
         let keys;
         switch (field) {
             case MoveForwardField:
-                keys = MoveForwardKeys;
+                keys = this.options.keyboardMoveForwardKeys ?? DefaultMoveForwardKeys;
                 break;
             case MoveBackwardField:
-                keys = MoveBackwardKeys;
+                keys = this.options.keyboardMoveBackwardKeys ?? DefaultMoveBackwardKeys;
                 break;
             case MoveLeftField:
-                keys = MoveLeftKeys;
+                keys = this.options.keyboardMoveLeftKeys ?? DefaultMoveLeftKeys;
                 break;
             case MoveRightField:
-                keys = MoveRightKeys;
+                keys = this.options.keyboardMoveRightKeys ?? DefaultMoveRightKeys;
                 break;
             case RunField:
-                keys = RunKeys;
+                keys = this.options.keyboardRunKeys ?? DefaultRunKeys;
                 break;
         }
         if (keys == null) {
@@ -71,7 +78,7 @@ export class LocomotionKeyboardInput {
             return state.releaseTime == null || state.pressTime > state.releaseTime;
         });
     }
-    destroy() {
+    dispose() {
         this.abortController.abort();
     }
 }

package/dist/input/pointer-capture.d.ts

@@ -1,4 +1,8 @@
 import { Input, InputField } from './index.js';
+export type PointerCaptureInputOptions = {
+    pointerCaptureRotationSpeed?: number;
+    pointerCaptureZoomSpeed?: number;
+};
 /**
  * @requires to manually execute `domElement.setPointerCapture(pointerId)` on pointerdown
  */
@@ -8,7 +12,9 @@ export declare class PointerCaptureInput implements Input {
     private deltaZoom;
     private deltaYaw;
     private deltaPitch;
-    constructor(domElement: HTMLElement);
+    private activePointers;
+    private lastPinchDist;
+    constructor(domElement: HTMLElement, options?: PointerCaptureInputOptions);
     get<T>(field: InputField<T>): T | undefined;
-    destroy(): void;
+    dispose(): void;
 }

package/dist/input/pointer-capture.js

@@ -8,29 +8,64 @@ export class PointerCaptureInput {
     deltaZoom = 0;
     deltaYaw = 0;
     deltaPitch = 0;
-    constructor(domElement) {
+    activePointers = new Map();
+    lastPinchDist = null;
+    constructor(domElement, options = {}) {
         this.domElement = domElement;
-        domElement.addEventListener('pointerdown', (event) => this.domElement.setPointerCapture(event.pointerId), {
+        domElement.addEventListener('pointerdown', (event) => {
+            this.domElement.setPointerCapture(event.pointerId);
+            this.activePointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+            if (this.activePointers.size === 2) {
+                const pts = Array.from(this.activePointers.values());
+                this.lastPinchDist = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
+            }
+        }, {
             signal: this.abortController.signal,
         });
         domElement.addEventListener('pointermove', (event) => {
             if (!this.domElement.hasPointerCapture(event.pointerId)) {
                 return;
             }
-            this.deltaYaw -= (0.4 * event.movementX) / window.innerHeight;
-            this.deltaPitch -= (0.4 * event.movementY) / window.innerHeight;
+            this.activePointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
+            if (this.activePointers.size === 2) {
+                const pts = Array.from(this.activePointers.values());
+                if (this.lastPinchDist != null) {
+                    const d = Math.hypot(pts[0].x - pts[1].x, pts[0].y - pts[1].y);
+                    const zoomSpeed = options.pointerCaptureZoomSpeed ?? 0.0001;
+                    this.deltaZoom += (this.lastPinchDist - d) * zoomSpeed;
+                    this.lastPinchDist = d;
+                }
+                event.preventDefault();
+                return;
+            }
+            const rotationSpeed = options.pointerCaptureRotationSpeed ?? 0.4;
+            this.deltaYaw -= (rotationSpeed * event.movementX) / window.innerHeight;
+            this.deltaPitch -= (rotationSpeed * event.movementY) / window.innerHeight;
         }, {
             signal: this.abortController.signal,
         });
-        domElement.addEventListener('pointerup', (event) => this.domElement.releasePointerCapture(event.pointerId), {
+        domElement.addEventListener('pointerup', (event) => {
+            this.domElement.releasePointerCapture(event.pointerId);
+            this.activePointers.delete(event.pointerId);
+            if (this.activePointers.size < 2) {
+                this.lastPinchDist = null;
+            }
+        }, {
             signal: this.abortController.signal,
         });
-        domElement.addEventListener('pointercancel', (event) => this.domElement.releasePointerCapture(event.pointerId), {
+        domElement.addEventListener('pointercancel', (event) => {
+            this.domElement.releasePointerCapture(event.pointerId);
+            this.activePointers.delete(event.pointerId);
+            if (this.activePointers.size < 2) {
+                this.lastPinchDist = null;
+            }
+        }, {
             signal: this.abortController.signal,
         });
         domElement.addEventListener('wheel', (event) => {
             event.preventDefault();
-            this.deltaZoom += event.deltaY * 0.0001;
+            const zoomSpeed = options.pointerCaptureZoomSpeed ?? 0.0001;
+            this.deltaZoom += event.deltaY * zoomSpeed;
         }, {
             signal: this.abortController.signal,
         });
@@ -53,7 +88,7 @@ export class PointerCaptureInput {
         }
         return result;
     }
-    destroy() {
+    dispose() {
         this.abortController.abort();
     }
 }

package/dist/input/pointer-lock.d.ts

@@ -1,4 +1,8 @@
 import { Input, InputField } from './index.js';
+export type PointerLockInputOptions = {
+    pointerLockRotationSpeed?: number;
+    pointerLockZoomSpeed?: number;
+};
 /**
  * @requires to manually execute `domElement.requestPointerLock()`
  */
@@ -7,7 +11,7 @@ export declare class PointerLockInput implements Input {
     private deltaZoom;
     private deltaYaw;
     private deltaPitch;
-    constructor(domElement: HTMLElement);
+    constructor(domElement: HTMLElement, options?: PointerLockInputOptions);
     get<T>(field: InputField<T>): T | undefined;
-    destroy(): void;
+    dispose(): void;
 }

package/dist/input/pointer-lock.js

@@ -7,15 +7,16 @@ export class PointerLockInput {
     deltaZoom = 0;
     deltaYaw = 0;
     deltaPitch = 0;
-    constructor(domElement) {
+    constructor(domElement, options = {}) {
         domElement.addEventListener('pointermove', (event) => {
             if (document.pointerLockElement != domElement) {
                 return;
             }
+            const rotationSpeed = options.pointerLockRotationSpeed ?? 0.4;
             // Compute based on domElement bounds instead of window.innerHeight
             const rect = domElement.getBoundingClientRect();
-            this.deltaYaw -= (0.4 * event.movementX) / rect.height;
-            this.deltaPitch -= (0.4 * event.movementY) / rect.height;
+            this.deltaYaw -= (rotationSpeed * event.movementX) / rect.height;
+            this.deltaPitch -= (rotationSpeed * event.movementY) / rect.height;
         }, {
             signal: this.abortController.signal,
         });
@@ -23,7 +24,8 @@ export class PointerLockInput {
             if (document.pointerLockElement != domElement) {
                 return;
             }
-            this.deltaZoom += event.deltaY * 0.0001;
+            const zoomSpeed = options.pointerLockZoomSpeed ?? 0.0001;
+            this.deltaZoom += event.deltaY * zoomSpeed;
             event.preventDefault();
         }, {
             signal: this.abortController.signal,
@@ -47,7 +49,7 @@ export class PointerLockInput {
         }
         return result;
     }
-    destroy() {
+    dispose() {
         this.abortController.abort();
     }
 }

package/dist/input/screen-joystick.d.ts

@@ -0,0 +1,22 @@
+import { Input, InputField } from './index.js';
+export type ScreenJoystickInputOptions = {
+    screenJoystickRunDistancePx?: number;
+    screenJoystickDeadZonePx?: number;
+};
+export declare class ScreenJoystickInput implements Input {
+    private readonly options;
+    readonly root: HTMLDivElement;
+    private readonly handle;
+    private moveX;
+    private moveY;
+    private running;
+    private readonly joystickRadius;
+    private joyCenterX;
+    private joyCenterY;
+    private pointerId;
+    constructor(domElement: HTMLElement, options?: ScreenJoystickInputOptions);
+    get<T>(field: InputField<T>): T | undefined;
+    dispose(): void;
+    private updateHandle;
+    private resetHandle;
+}

package/dist/input/screen-joystick.js

@@ -0,0 +1,127 @@
+import { MoveForwardField, MoveBackwardField, MoveLeftField, MoveRightField, RunField, } from './index.js';
+const DefaultDeadZonePx = 24;
+const DefaultRunDistancePx = 46;
+export class ScreenJoystickInput {
+    options;
+    root;
+    handle;
+    moveX = 0;
+    moveY = 0;
+    running = false;
+    joystickRadius = 56;
+    joyCenterX = 0;
+    joyCenterY = 0;
+    pointerId;
+    constructor(domElement, options = {}) {
+        this.options = options;
+        const parent = domElement.parentElement ?? domElement;
+        const joy = document.createElement('div');
+        joy.className = 'viverse-joystick mobile-only';
+        parent.appendChild(joy);
+        this.root = joy;
+        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 handle = document.createElement('div');
+        handle.className = 'viverse-joystick-handle';
+        joy.appendChild(handle);
+        this.handle = 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();
+            joy.setPointerCapture(e.pointerId);
+            this.pointerId = e.pointerId;
+            const rect = joy.getBoundingClientRect();
+            this.joyCenterX = rect.left + rect.width / 2;
+            this.joyCenterY = rect.top + rect.height / 2;
+            this.updateHandle(e.clientX - this.joyCenterX, e.clientY - this.joyCenterY);
+        };
+        const onPointerMove = (e) => {
+            if (this.pointerId == null) {
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            this.updateHandle(e.clientX - this.joyCenterX, e.clientY - this.joyCenterY);
+        };
+        const onPointerEnd = (e) => {
+            if (this.pointerId != e.pointerId) {
+                return;
+            }
+            this.pointerId = undefined;
+            joy.releasePointerCapture(e.pointerId);
+            e.preventDefault();
+            this.resetHandle();
+        };
+        joy.addEventListener('pointerdown', onPointerDown);
+        joy.addEventListener('pointermove', onPointerMove);
+        joy.addEventListener('pointerup', onPointerEnd);
+        joy.addEventListener('pointercancel', onPointerEnd);
+    }
+    get(field) {
+        switch (field) {
+            case MoveForwardField:
+                return Math.max(0, this.moveY);
+            case MoveBackwardField:
+                return Math.max(0, -this.moveY);
+            case MoveLeftField:
+                return Math.max(0, -this.moveX);
+            case MoveRightField:
+                return Math.max(0, this.moveX);
+            case RunField:
+                return this.running;
+        }
+        return undefined;
+    }
+    dispose() {
+        this.root.remove();
+    }
+    updateHandle(dx, dy) {
+        const len = Math.hypot(dx, dy) || 1;
+        const max = this.joystickRadius;
+        const clampedX = (dx / len) * Math.min(len, max);
+        const clampedY = (dy / len) * Math.min(len, max);
+        this.handle.style.transform = `translate(-50%,-50%) translate(${clampedX}px, ${clampedY}px)`;
+        if (len <= (this.options.screenJoystickDeadZonePx ?? DefaultDeadZonePx)) {
+            this.moveX = 0;
+            this.moveY = 0;
+        }
+        else {
+            this.moveX = clampedX / max;
+            this.moveY = -clampedY / max;
+        }
+        this.running = len > (this.options.screenJoystickRunDistancePx ?? DefaultRunDistancePx);
+    }
+    resetHandle() {
+        this.handle.style.transform = 'translate(-50%,-50%)';
+        this.moveX = 0;
+        this.moveY = 0;
+        this.running = false;
+    }
+}

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

@@ -0,0 +1,8 @@
+import { Input, InputField } from './index.js';
+export declare class ScreenJumpButtonInput implements Input {
+    readonly root: HTMLDivElement;
+    private lastJumpTime;
+    constructor(domElement: HTMLElement);
+    get<T>(field: InputField<T>): T | undefined;
+    dispose(): void;
+}

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

@@ -0,0 +1,49 @@
+import { LastTimeJumpPressedField } from './index.js';
+export class ScreenJumpButtonInput {
+    root;
+    lastJumpTime = null;
+    constructor(domElement) {
+        const parent = domElement.parentElement ?? domElement;
+        const btn = document.createElement('div');
+        btn.className = 'viverse-button viverse-jump mobile-only';
+        parent.appendChild(btn);
+        this.root = btn;
+        this.root.style.position = 'absolute';
+        this.root.style.bottom = '32px';
+        this.root.style.right = '126px';
+        this.root.style.minWidth = '64px';
+        this.root.style.height = '64px';
+        this.root.style.borderRadius = '9999px';
+        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.background = 'rgba(255,255,255,0.3)';
+        this.root.style.backgroundImage =
+            '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")';
+        this.root.style.backgroundRepeat = 'no-repeat';
+        this.root.style.backgroundPosition = 'center';
+        this.root.style.backgroundSize = '50%';
+        const onPress = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            this.lastJumpTime = performance.now() / 1000;
+        };
+        const stopPropagation = (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+        };
+        this.root.addEventListener('pointerdown', onPress);
+        this.root.addEventListener('pointermove', stopPropagation);
+        this.root.addEventListener('pointerup', stopPropagation);
+    }
+    get(field) {
+        if (field === LastTimeJumpPressedField) {
+            return this.lastJumpTime;
+        }
+        return undefined;
+    }
+    dispose() {
+        this.root.remove();
+    }
+}

package/dist/physics/index.d.ts

@@ -34,7 +34,7 @@ export type BvhCharacterPhysicsOptions = {
 export declare class BvhCharacterPhysics {
     private readonly character;
     private readonly world;
-    private destroyed;
+    private disposed;
     private readonly stateVelocity;
     readonly inputVelocity: Vector3;
     private notGroundedSeconds;
@@ -49,7 +49,7 @@ export declare class BvhCharacterPhysics {
      */
     update(fullDelta: number, options?: BvhCharacterPhysicsOptions): void;
     private updateBoundingShapes;
-    destroy(): void;
+    dispose(): void;
     shapecastCapsule(position: Vector3, maxGroundSlope: number, options: Exclude<BvhCharacterPhysicsOptions, boolean>): boolean;
 }
 export * from './world.js';

package/dist/physics/index.js

@@ -13,7 +13,7 @@ const YAxis = new Vector3(0, 1, 0);
 export class BvhCharacterPhysics {
     character;
     world;
-    destroyed = false;
+    disposed = false;
     stateVelocity = new Vector3();
     inputVelocity = new Vector3();
     notGroundedSeconds = 0;
@@ -40,7 +40,7 @@ export class BvhCharacterPhysics {
         if (options === true) {
             options = {};
         }
-        if (this.destroyed) {
+        if (this.disposed) {
             return;
         }
         //at max catch up to 1 second of physics in one update call (running at less then 1fps is unplayable anyways)
@@ -101,8 +101,8 @@ export class BvhCharacterPhysics {
         this.aabbox.min.addScalar(-this.radius);
         this.aabbox.max.addScalar(this.radius);
     }
-    destroy() {
-        this.destroyed = true;
+    dispose() {
+        this.disposed = true;
     }
     shapecastCapsule(position, maxGroundSlope, options) {
         this.updateBoundingShapes(options);

package/dist/physics/world.js

@@ -47,7 +47,7 @@ export class BvhPhysicsWorld {
             throw new Error(`cannot add InstancedMesh with children`);
         }
         const bvh = computeBoundsTree.apply(object.geometry);
-        return new Array(object.instanceMatrix).fill(undefined).map((_, i) => ({
+        return new Array(object.instanceMatrix.count).fill(undefined).map((_, i) => ({
             object,
             bvh,
             instanceIndex: i,

package/dist/simple-character.d.ts

@@ -2,7 +2,7 @@ import { VRM } from '@pixiv/three-vrm';
 import { AnimationAction, AnimationClip, AnimationMixer, Group, Object3D, Object3DEventMap, Quaternion } from 'three';
 import { simpleCharacterAnimationNames, ModelAnimationOptions } from './animation/index.js';
 import { SimpleCharacterCameraBehavior, SimpleCharacterCameraBehaviorOptions } from './camera.js';
-import { Input, InputSystem } from './input/index.js';
+import { Input, InputSystem, ScreenJoystickInputOptions, LocomotionKeyboardInputOptions, PointerCaptureInputOptions, PointerLockInputOptions } from './input/index.js';
 import { CharacterModelOptions, loadCharacterModel } from './model/index.js';
 import { BvhCharacterPhysicsOptions, BvhCharacterPhysics, BvhPhysicsWorld } from './physics/index.js';
 export type SimpleCharacterMovementOptions = {
@@ -57,13 +57,12 @@ export type SimpleCharacterAnimationOptions = {
      */
     crossFadeDuration?: number;
 };
+export type SimpleCharacterInputOptions = ScreenJoystickInputOptions & PointerCaptureInputOptions & PointerLockInputOptions & LocomotionKeyboardInputOptions;
 export type SimpleCharacterOptions = {
-    /**
-     * @default [LocomotionKeyboardInput,PointerCaptureInput]
-     */
     readonly input?: ReadonlyArray<Input | {
         new (domElement: HTMLElement): Input;
     }> | InputSystem;
+    inputOptions?: SimpleCharacterInputOptions;
     movement?: SimpleCharacterMovementOptions;
     readonly model?: CharacterModelOptions;
     physics?: BvhCharacterPhysicsOptions;
@@ -90,6 +89,7 @@ export declare function preloadSimpleCharacterAssets(options: Pick<SimpleCharact
 export declare class SimpleCharacter extends Group<Object3DEventMap & {
     loaded: {};
 }> {
+    private readonly camera;
     readonly options: SimpleCharacterOptions;
     readonly cameraBehavior: SimpleCharacterCameraBehavior;
     readonly physics: BvhCharacterPhysics;
@@ -98,7 +98,8 @@ export declare class SimpleCharacter extends Group<Object3DEventMap & {
     actions?: Record<(typeof simpleCharacterAnimationNames)[number], AnimationAction> | undefined;
     model?: Awaited<Exclude<ReturnType<typeof loadCharacterModel>, undefined>>;
     private updateTimeline?;
-    constructor(camera: Object3D, world: BvhPhysicsWorld, domElement: HTMLElement, options?: SimpleCharacterOptions);
+    constructor(camera: Object3D | (() => Object3D), world: BvhPhysicsWorld, domElement: HTMLElement, options?: SimpleCharacterOptions);
+    getCamera(): Object3D<Object3DEventMap>;
     private init;
     update(delta: number): void;
     dispose(): void;

package/dist/simple-character.js

@@ -3,9 +3,10 @@ import { action, animationFinished, start, timePassed, forever, parallel, graph,
 import { AnimationMixer, Euler, Group, LoopOnce, Quaternion, Vector3, } from 'three';
 import { simpleCharacterAnimationNames, getSimpleCharacterModelAnimationOptions as getSimpleCharacterModelAnimationOptions, loadCharacterModelAnimation as loadCharacterModelAnimation, } from './animation/index.js';
 import { SimpleCharacterCameraBehavior } from './camera.js';
-import { InputSystem, LocomotionKeyboardInput, MoveBackwardField, MoveForwardField, MoveLeftField, MoveRightField, PointerCaptureInput, RunField, LastTimeJumpPressedField, } from './input/index.js';
+import { InputSystem, LocomotionKeyboardInput, MoveBackwardField, MoveForwardField, MoveLeftField, MoveRightField, PointerCaptureInput, RunField, LastTimeJumpPressedField, ScreenJoystickInput, ScreenJumpButtonInput, } from './input/index.js';
 import { clearCharacterModelCache, loadCharacterModel } from './model/index.js';
 import { BvhCharacterPhysics } from './physics/index.js';
+import { extractProxy } from './utils.js';
 const DefaultCrossFadeDuration = 0.1;
 const DefaultJumDelay = 0.2;
 //constants
@@ -35,7 +36,7 @@ export async function preloadSimpleCharacterAssets(options) {
         }, {}),
     };
 }
-async function* SimpleCharacterTimeline(camera, character) {
+async function* SimpleCharacterTimeline(character) {
     let lastJump = 0;
     function shouldJump() {
         let jumpOptions = character.options.movement?.jump;
@@ -55,6 +56,10 @@ async function* SimpleCharacterTimeline(camera, character) {
         if (lastJump > lastTimePressed) {
             return false;
         }
+        //last jump must be more then 0.3 second ago, if not, we dont jump, this is to give the character time to get off the ground
+        if (lastJump > performance.now() / 1000 - 0.3) {
+            return false;
+        }
         return performance.now() / 1000 - lastTimePressed < (jumpOptions?.bufferTime ?? 0.1);
     }
     function applyJumpForce() {
@@ -69,7 +74,7 @@ async function* SimpleCharacterTimeline(camera, character) {
     // character movement
     action({
         update() {
-            cameraEuler.setFromQuaternion(camera.getWorldQuaternion(cameraRotation), 'YXZ');
+            cameraEuler.setFromQuaternion(character.getCamera().getWorldQuaternion(cameraRotation), 'YXZ');
             cameraEuler.x = 0;
             cameraEuler.z = 0;
             let inputSpeed = 0;
@@ -100,7 +105,7 @@ async function* SimpleCharacterTimeline(camera, character) {
                 const basedOn = character.options.animation?.yawRotationBasdOn ?? 'movement';
                 // compute goalTargetEuler
                 if (basedOn === 'camera') {
-                    goalTargetEuler.setFromQuaternion(camera.getWorldQuaternion(quaternion), 'YXZ');
+                    goalTargetEuler.setFromQuaternion(character.getCamera().getWorldQuaternion(quaternion), 'YXZ');
                 }
                 else {
                     //don't rotate if not moving
@@ -269,6 +274,7 @@ async function* SimpleCharacterTimeline(camera, character) {
         }));
 }
 export class SimpleCharacter extends Group {
+    camera;
     options;
     cameraBehavior;
     physics;
@@ -281,20 +287,24 @@ export class SimpleCharacter extends Group {
     updateTimeline;
     constructor(camera, world, domElement, options = {}) {
         super();
+        this.camera = camera;
         this.options = options;
         // input system
         this.inputSystem =
             options.input instanceof InputSystem
                 ? options.input
-                : new InputSystem(domElement, options.input ?? [LocomotionKeyboardInput, PointerCaptureInput]);
+                : new InputSystem(domElement, options.input ?? [ScreenJoystickInput, ScreenJumpButtonInput, PointerCaptureInput, LocomotionKeyboardInput], extractProxy(options, 'inputOptions'));
         options.physics ??= {};
         // camera behavior
-        this.cameraBehavior = new SimpleCharacterCameraBehavior(camera, this, world.raycast.bind(world));
+        this.cameraBehavior = new SimpleCharacterCameraBehavior(typeof camera === 'function' ? camera : () => camera, this, world.raycast.bind(world));
         // physics
         this.physics = new BvhCharacterPhysics(this, world);
-        this.init(camera, options).catch(console.error);
+        this.init(options).catch(console.error);
+    }
+    getCamera() {
+        return typeof this.camera === 'function' ? this.camera() : this.camera;
     }
-    async init(camera, options) {
+    async init(options) {
         const { model, animations } = await preloadSimpleCharacterAssets(options);
         this.model = model;
         if (model != null && animations != null) {
@@ -310,7 +320,7 @@ export class SimpleCharacter extends Group {
             this.actions.jumpForward.loop = LoopOnce;
             this.actions.jumpForward.clampWhenFinished = true;
         }
-        this.updateTimeline = start(SimpleCharacterTimeline(camera, this));
+        this.updateTimeline = start(SimpleCharacterTimeline(this));
         this.dispatchEvent({ type: 'loaded' });
     }
     update(delta) {
@@ -325,6 +335,8 @@ export class SimpleCharacter extends Group {
     dispose() {
         this.parent?.remove(this);
         this.model?.scene.dispatchEvent({ type: 'dispose' });
+        this.inputSystem.dispose();
+        this.physics.dispose();
         VRMUtils.deepDispose(this);
     }
 }

package/dist/utils.d.ts

@@ -1,2 +1,7 @@
 export declare function cached<D extends ReadonlyArray<unknown>, T>(fn: (...deps: D) => Promise<T>, dependencies: D): Promise<T>;
 export declare function clearCache(fn: Function, dependencies: Array<unknown>): void;
+export declare function extractProxy<K extends string, T extends {
+    [key in K]?: {};
+}>(value: T, key: K): Partial<Exclude<T[K], undefined>>;
+export declare function getIsMobileMediaQuery(): MediaQueryList | undefined;
+export declare function isMobile(): boolean;

package/dist/utils.js

@@ -32,3 +32,17 @@ export function clearCache(fn, dependencies) {
     }
     cache.splice(index, 1);
 }
+export function extractProxy(value, key) {
+    return new Proxy({}, {
+        get: (_, p) => value[key]?.[p],
+    });
+}
+export function getIsMobileMediaQuery() {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+        return undefined;
+    }
+    return window.matchMedia('(hover: none) and (pointer: coarse)');
+}
+export function isMobile() {
+    return getIsMobileMediaQuery()?.matches ?? false;
+}

package/package.json

@@ -21,7 +21,7 @@
   "peerDependencies": {
     "three": "*"
   },
-  "version": "0.1.16",
+  "version": "0.1.18",
   "type": "module",
   "dependencies": {
     "@pixiv/three-vrm": "^3.4.2",