@pmndrs/viverse 0.1.17 → 0.1.19

package/dist/animation/fbx.d.ts

@@ -0,0 +1,4 @@
+import { AnimationClip } from 'three';
+import { loadCharacterModel } from '../model/index.js';
+import type { VRMHumanBoneName } from '@pixiv/three-vrm';
+export declare function loadVrmModelFbxAnimations(model: Exclude<Awaited<ReturnType<typeof loadCharacterModel>>, undefined>, url: string, removeXZMovement: boolean, boneMap?: Record<string, VRMHumanBoneName>): Promise<Array<AnimationClip>>;

package/dist/animation/{mixamo.js → fbx.js}

@@ -1,9 +1,8 @@
 import { FBXLoader } from 'three/examples/jsm/Addons.js';
 import { fixModelAnimationClip } from './index.js';
-import mixamoBoneMap from './mixamo-bone-map.json';
 const loader = new FBXLoader();
-export async function loadVrmModelMixamoAnimations(model, url, removeXZMovement) {
+export async function loadVrmModelFbxAnimations(model, url, removeXZMovement, boneMap) {
     const clipScene = await loader.loadAsync(url);
-    clipScene.animations.forEach((clip) => fixModelAnimationClip(model, clip, clipScene, removeXZMovement, mixamoBoneMap));
+    clipScene.animations.forEach((clip) => fixModelAnimationClip(model, clip, clipScene, removeXZMovement, boneMap));
     return clipScene.animations;
 }

package/dist/animation/gltf.d.ts

@@ -1,3 +1,3 @@
 import { AnimationClip } from 'three';
-import { loadCharacterModel } from '../model/index.js';
-export declare function loadVrmModelGltfAnimations(model: Exclude<Awaited<ReturnType<typeof loadCharacterModel>>, undefined>, url: string, removeXZMovement: boolean): Promise<Array<AnimationClip>>;
+import { loadCharacterModel, VRMHumanBoneName } from '../model/index.js';
+export declare function loadVrmModelGltfAnimations(model: Exclude<Awaited<ReturnType<typeof loadCharacterModel>>, undefined>, url: string, removeXZMovement: boolean, boneMap?: Record<string, VRMHumanBoneName>): Promise<Array<AnimationClip>>;

package/dist/animation/gltf.js

@@ -1,8 +1,8 @@
 import { GLTFLoader } from 'three/examples/jsm/Addons.js';
 import { fixModelAnimationClip } from './index.js';
 const loader = new GLTFLoader();
-export async function loadVrmModelGltfAnimations(model, url, removeXZMovement) {
+export async function loadVrmModelGltfAnimations(model, url, removeXZMovement, boneMap) {
     const { animations, scene: clipScene } = await loader.loadAsync(url);
-    animations.forEach((clip) => fixModelAnimationClip(model, clip, clipScene, removeXZMovement));
+    animations.forEach((clip) => fixModelAnimationClip(model, clip, clipScene, removeXZMovement, boneMap));
     return animations;
 }

package/dist/animation/index.d.ts

@@ -3,17 +3,18 @@ import { AnimationClip, Object3D } from 'three';
 import { loadCharacterModel } from '../model/index.js';
 export declare function fixModelAnimationClip(model: Exclude<Awaited<ReturnType<typeof loadCharacterModel>>, undefined>, clip: AnimationClip, clipScene: Object3D, removeXZMovement: boolean, boneMap?: Record<string, VRMHumanBoneName>): void;
 export * from './gltf.js';
-export * from './mixamo.js';
+export * from './fbx.js';
 export * from './vrma.js';
 export * from './utils.js';
 export type ModelAnimationOptions = {
-    type: 'mixamo' | 'gltf' | 'vrma';
+    type: 'mixamo' | 'gltf' | 'vrma' | 'fbx';
     url: string;
     removeXZMovement?: boolean;
     trimTime?: {
         start?: number;
         end?: number;
     };
+    boneMap?: Record<string, VRMHumanBoneName>;
     scaleTime?: number;
 };
 export declare function loadCharacterModelAnimation(model: Exclude<Awaited<ReturnType<typeof loadCharacterModel>>, undefined>, options: ModelAnimationOptions): Promise<AnimationClip>;
@@ -28,3 +29,4 @@ declare const simpleCharacterAnimationUrls: {
 };
 export declare const simpleCharacterAnimationNames: Array<keyof typeof simpleCharacterAnimationUrls>;
 export declare function getSimpleCharacterModelAnimationOptions(animationName: keyof typeof simpleCharacterAnimationUrls): Promise<ModelAnimationOptions>;
+export declare const mixamoBoneMap: Record<string, VRMHumanBoneName>;

package/dist/animation/index.js

@@ -1,21 +1,31 @@
 import { VRM } from '@pixiv/three-vrm';
 import { Euler, Quaternion, QuaternionKeyframeTrack, Vector3, VectorKeyframeTrack, } from 'three';
-import { loadVrmModelGltfAnimations as loadModelGltfAnimations } from './gltf.js';
-import { loadVrmModelMixamoAnimations as loadModelMixamoAnimations } from './mixamo.js';
+import { loadVrmModelFbxAnimations } from './fbx.js';
+import { loadVrmModelGltfAnimations } from './gltf.js';
 import { scaleAnimationClipTime, trimAnimationClip } from './utils.js';
 import { loadVrmModelVrmaAnimations } from './vrma.js';
 import { cached } from '../utils.js';
-const restRotationInverse = new Quaternion();
-const parentRestWorldRotation = new Quaternion();
-const quaternion = new Quaternion();
-const vector = new Vector3();
+import _mixamoBoneMap from './mixamo-bone-map.json';
+//helper variables for the quaternion retargeting
+const baseThisLocalRestRotation_inverse = new Quaternion();
+const baseThisLocalCurrentRotation = new Quaternion();
+const baseParentWorldRestRotation = new Quaternion();
+const baseParentWorldRestRotation_inverse = new Quaternion();
+const targetParentWorldRestRotation = new Quaternion();
+const targetParentWorldRestRotation_inverse = new Quaternion();
+const targetThisLocalRestRotation = new Quaternion();
+const targetThisLocalCurrentRotation = new Quaternion();
+//helper variables for the position retargeting
+const position = new Vector3();
 const nonVrmRotationOffset = new Quaternion().setFromEuler(new Euler(0, Math.PI, 0));
+//TODO: currently assumes the model is not yet transformed - loaded for the first time
 export function fixModelAnimationClip(model, clip, clipScene, removeXZMovement, boneMap) {
     const hipsBoneName = boneMap == null ? 'hips' : Object.entries(boneMap).find(([, vrmBoneName]) => vrmBoneName === 'hips')?.[0];
     if (hipsBoneName == null) {
         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);
+    clipSceneHips?.parent?.updateMatrixWorld();
     const vrmHipsPosition = model instanceof VRM
         ? model.humanoid.normalizedRestPose.hips?.position
         : model.scene.getObjectByName('hips')?.position.toArray();
@@ -23,82 +33,111 @@ export function fixModelAnimationClip(model, clip, clipScene, removeXZMovement,
         throw new Error('Failed to load VRM animation: missing animation hips object or VRM hips position.');
     }
     // Adjust with reference to hips height.
-    const motionHipsHeight = clipSceneHips.position.y;
+    const motionHipsHeight = clipSceneHips.getWorldPosition(position).y;
     const [_, vrmHipsHeight] = vrmHipsPosition;
-    const hipsPositionScale = vrmHipsHeight / motionHipsHeight;
+    const positionScale = vrmHipsHeight / motionHipsHeight;
     for (const track of clip.tracks) {
         // Convert each tracks for VRM use, and push to `tracks`
         const [boneName, propertyName] = track.name.split('.');
         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) {
+        const targetBone = model instanceof VRM
+            ? model.humanoid.getNormalizedBoneNode(vrmBoneName)
+            : model.scene.getObjectByName(vrmBoneName);
+        if (targetBone == null) {
+            continue;
+        }
+        const vrmNodeName = model instanceof VRM ? targetBone.name : vrmBoneName;
+        const baseBone = clipScene.getObjectByName(boneName);
+        if (vrmNodeName == null || baseBone == null) {
             continue;
         }
         if (track instanceof QuaternionKeyframeTrack) {
-            if (bone.parent != null) {
-                bone.getWorldQuaternion(restRotationInverse).invert();
-                bone.parent.getWorldQuaternion(parentRestWorldRotation);
+            // Store rotations of rest-pose.
+            baseThisLocalRestRotation_inverse.copy(baseBone.quaternion).invert();
+            if (baseBone.parent != null) {
+                baseBone.parent.getWorldQuaternion(baseParentWorldRestRotation);
+                baseParentWorldRestRotation_inverse.copy(baseParentWorldRestRotation).invert();
             }
             else {
-                restRotationInverse.identity();
-                parentRestWorldRotation.identity();
+                baseParentWorldRestRotation.identity();
+                baseParentWorldRestRotation_inverse.identity();
+            }
+            targetThisLocalRestRotation.copy(targetBone.quaternion);
+            if (targetBone.parent != null) {
+                targetBone.parent.getWorldQuaternion(targetParentWorldRestRotation);
+                targetParentWorldRestRotation_inverse.copy(targetParentWorldRestRotation).invert();
+            }
+            else {
+                targetParentWorldRestRotation.identity();
+                targetParentWorldRestRotation_inverse.identity();
             }
-            // Store rotations of rest-pose.
             for (let i = 0; i < track.values.length; i += 4) {
-                quaternion.fromArray(track.values, i);
-                if (model instanceof VRM) {
-                    quaternion.premultiply(parentRestWorldRotation).multiply(restRotationInverse);
-                    if (model.meta.metaVersion === '0') {
-                        quaternion.x *= -1;
-                        quaternion.z *= -1;
-                    }
+                baseThisLocalCurrentRotation.fromArray(track.values, i);
+                targetThisLocalCurrentRotation
+                    .copy(targetParentWorldRestRotation_inverse)
+                    .multiply(baseParentWorldRestRotation)
+                    .multiply(baseThisLocalCurrentRotation)
+                    .multiply(baseThisLocalRestRotation_inverse)
+                    .multiply(baseParentWorldRestRotation_inverse)
+                    .multiply(targetParentWorldRestRotation)
+                    .multiply(targetThisLocalRestRotation);
+                if (model instanceof VRM && model.meta.metaVersion === '0') {
+                    targetThisLocalCurrentRotation.x *= -1;
+                    targetThisLocalCurrentRotation.z *= -1;
                 }
-                if (vrmBoneName === 'root') {
-                    quaternion.multiply(nonVrmRotationOffset);
+                if (!(model instanceof VRM) && vrmBoneName === 'hips') {
+                    targetThisLocalCurrentRotation.premultiply(nonVrmRotationOffset);
                 }
-                if (removeXZMovement) {
-                    //TODO
-                }
-                quaternion.toArray(track.values, i);
+                targetThisLocalCurrentRotation.toArray(track.values, i);
             }
             track.name = `${vrmNodeName}.${propertyName}`;
         }
         else if (track instanceof VectorKeyframeTrack) {
             track.name = `${vrmNodeName}.${propertyName}`;
-            if (propertyName === 'scale') {
+            if (propertyName != 'position') {
                 continue;
             }
             for (let i = 0; i < track.values.length; i += 3) {
-                vector.fromArray(track.values, i);
-                vector.multiplyScalar(hipsPositionScale);
+                position.fromArray(track.values, i);
+                if (clipSceneHips.parent != null) {
+                    if (vrmBoneName === 'hips') {
+                        position.applyMatrix4(clipSceneHips.parent.matrixWorld);
+                    }
+                    else {
+                        position.multiplyScalar(clipSceneHips.parent.matrixWorld.getMaxScaleOnAxis());
+                    }
+                }
+                position.multiplyScalar(positionScale);
                 if (model instanceof VRM) {
                     if (model.meta.metaVersion === '0') {
-                        vector.negate();
-                        vector.y *= -1;
+                        position.negate();
+                        position.y *= -1;
                     }
                 }
                 if (vrmBoneName === 'hips' && removeXZMovement) {
-                    vector.x = 0;
-                    vector.z = 0;
+                    position.x = 0;
+                    position.z = 0;
                 }
-                vector.toArray(track.values, i);
+                position.toArray(track.values, i);
             }
         }
     }
 }
 export * from './gltf.js';
-export * from './mixamo.js';
+export * from './fbx.js';
 export * from './vrma.js';
 export * from './utils.js';
-async function uncachedLoadModelAnimation(model, type, url, removeXZMovement, trimStartTime, trimEndTime, scaleTime) {
+async function uncachedLoadModelAnimation(model, type, url, removeXZMovement, trimStartTime, trimEndTime, boneMap, scaleTime) {
     let clips;
     switch (type) {
         case 'gltf':
-            clips = await loadModelGltfAnimations(model, url, removeXZMovement);
+            clips = await loadVrmModelGltfAnimations(model, url, removeXZMovement, boneMap);
+            break;
+        case 'fbx':
+            clips = await loadVrmModelFbxAnimations(model, url, removeXZMovement, boneMap);
             break;
         case 'mixamo':
-            clips = await loadModelMixamoAnimations(model, url, removeXZMovement);
+            clips = await loadVrmModelFbxAnimations(model, url, removeXZMovement, boneMap ?? mixamoBoneMap);
             break;
         case 'vrma':
             if (!(model instanceof VRM)) {
@@ -127,6 +166,7 @@ export function loadCharacterModelAnimation(model, options) {
         options.removeXZMovement ?? false,
         options.trimTime?.start,
         options.trimTime?.end,
+        options.boneMap,
         options.scaleTime,
     ]);
 }
@@ -152,3 +192,4 @@ export async function getSimpleCharacterModelAnimationOptions(animationName) {
         url: (await simpleCharacterAnimationUrls[animationName]()).url,
     };
 }
+export const mixamoBoneMap = _mixamoBoneMap;

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.17",
+  "version": "0.1.19",
   "type": "module",
   "dependencies": {
     "@pixiv/three-vrm": "^3.4.2",

package/dist/animation/mixamo.d.ts

@@ -1,3 +0,0 @@
-import { AnimationClip } from 'three';
-import { loadCharacterModel } from '../model/index.js';
-export declare function loadVrmModelMixamoAnimations(model: Exclude<Awaited<ReturnType<typeof loadCharacterModel>>, undefined>, url: string, removeXZMovement: boolean): Promise<Array<AnimationClip>>;