@react-three/viverse 0.2.0 → 0.2.2

package/README.md

@@ -61,9 +61,10 @@ Get started with **[building a simple game](https://pmndrs.github.io/viverse/tut
 - [Accessing avatar and profile](https://pmndrs.github.io/viverse/tutorials/access-avatar-and-profile)
 - [Equipping the character with items](https://pmndrs.github.io/viverse/tutorials/equipping-items)
 - [Using custom animations and models](https://pmndrs.github.io/viverse/tutorials/custom-models-and-animations)
+- [Actions](https://pmndrs.github.io/viverse/tutorials/actions)
+- [Custom Character Controller](https://pmndrs.github.io/viverse/tutorials/custom-character-controller)
 - [How to remove the viverse integrations](https://pmndrs.github.io/viverse/tutorials/remove-viverse-integrations)
 - [Publish to VIVERSE](https://pmndrs.github.io/viverse/tutorials/publish-to-viverse)
-- Building your own character controller - _Coming Soon_
 
 ## Not into react?
 

package/dist/animation.d.ts

@@ -1,9 +1,27 @@
 import { CharacterAnimationOptions, StartAnimationOptions } from '@pmndrs/viverse';
 import { RootState } from '@react-three/fiber';
 import { ActionParams } from '@react-three/timeline';
-import { AnimationActionLoopStyles } from 'three';
-export declare function CharacterAnimationAction({ until, init, dependencies, update, fadeDuration, paused, loop, ...animationOptions }: {
+import { ReactNode } from 'react';
+import { AnimationAction, AnimationActionLoopStyles, AnimationClip } from 'three';
+export type AdditiveCharacterAnimationActionProps = Omit<CharacterAnimationActionProps, 'additiveToClip'> & {
+    referenceClip: CharacterAnimationOptions;
+};
+export declare const AdditiveCharacterAnimationAction: import("react").ForwardRefExoticComponent<Omit<CharacterAnimationActionProps, "additiveToClip"> & {
+    referenceClip: CharacterAnimationOptions;
+} & import("react").RefAttributes<AnimationAction>>;
+export type CharacterAnimationActionProps = {
     dependencies?: Array<unknown>;
     until?: () => Promise<unknown>;
     loop?: AnimationActionLoopStyles;
-} & Omit<ActionParams<RootState>, 'until'> & CharacterAnimationOptions & StartAnimationOptions): import("react/jsx-runtime").JSX.Element;
+    additiveReferenceClip?: AnimationClip;
+} & Omit<ActionParams<RootState>, 'until'> & CharacterAnimationOptions & StartAnimationOptions;
+export declare function CharacterAnimationLayer({ name, children }: {
+    name: string;
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const CharacterAnimationAction: import("react").ForwardRefExoticComponent<{
+    dependencies?: Array<unknown>;
+    until?: () => Promise<unknown>;
+    loop?: AnimationActionLoopStyles;
+    additiveReferenceClip?: AnimationClip;
+} & Omit<ActionParams<RootState>, "until"> & CharacterAnimationOptions & StartAnimationOptions & import("react").RefAttributes<AnimationAction>>;

package/dist/animation.js

@@ -1,18 +1,44 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { startAnimation } from '@pmndrs/viverse';
 import { Action, animationFinished } from '@react-three/timeline';
-import { useMemo } from 'react';
+import { createContext, forwardRef, useContext, useImperativeHandle, useMemo } from 'react';
 import { LoopRepeat } from 'three';
+import { makeClipAdditive } from 'three/src/animation/AnimationUtils.js';
 import { useCharacterModel } from './model.js';
 import { useCharacterAnimationLoader } from './utils.js';
-export function CharacterAnimationAction({ until, init, dependencies, update, fadeDuration = 0.1, paused, loop, ...animationOptions }) {
+export const AdditiveCharacterAnimationAction = forwardRef(({ referenceClip: referenceClipOptions, ...props }, ref) => {
     const model = useCharacterModel();
-    const clip = useCharacterAnimationLoader(model, animationOptions);
+    const referenceClip = useCharacterAnimationLoader(model, { ...props, ...referenceClipOptions });
+    return _jsx(CharacterAnimationAction, { ref: ref, additiveReferenceClip: referenceClip, ...props });
+});
+const CharacterAnimationLayerContext = createContext(undefined);
+export function CharacterAnimationLayer({ name, children }) {
+    return _jsx(CharacterAnimationLayerContext.Provider, { value: name, children: children });
+}
+export const CharacterAnimationAction = forwardRef(({ additiveReferenceClip, until, init, dependencies, update, fadeDuration, paused, loop, sync, crossFade, layer, ...animationOptions }, ref) => {
+    const layerFromContext = useContext(CharacterAnimationLayerContext);
+    layer ??= layerFromContext;
+    const model = useCharacterModel();
+    const srcClip = useCharacterAnimationLoader(model, animationOptions);
+    const clip = useMemo(() => additiveReferenceClip == null ? srcClip : makeClipAdditive(srcClip.clone(), undefined, additiveReferenceClip), [srcClip, additiveReferenceClip]);
     const animation = useMemo(() => model.mixer.clipAction(clip), [clip, model]);
     animation.clampWhenFinished = true;
     animation.loop = loop ?? LoopRepeat;
+    useImperativeHandle(ref, () => animation, [animation]);
     return (_jsx(Action, { init: () => {
-            startAnimation(animation, model.currentAnimations, { fadeDuration, paused });
-            return init?.();
-        }, until: until ?? (() => animationFinished(animation)), update: update, dependencies: dependencies }));
-}
+            const cleanupAnimation = startAnimation(animation, model.currentAnimations, {
+                layer,
+                fadeDuration,
+                paused,
+                sync,
+                crossFade,
+            });
+            const cleanupInit = init?.();
+            return () => {
+                cleanupInit?.();
+                cleanupAnimation?.();
+            };
+        }, until: until ?? (() => animationFinished(animation)), update: update, dependencies: dependencies != null
+            ? [...dependencies, animationOptions.mask, fadeDuration, paused, sync, crossFade, animation, model, layer]
+            : undefined }));
+});

package/dist/bone.d.ts

@@ -4,3 +4,7 @@ export declare function CharacterModelBone({ bone, children }: {
     bone: VRMHumanBoneName;
     children?: ReactNode;
 }): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * @deprecated use CharacterModelBone instead
+ */
+export declare const VrmCharacterModelBone: typeof CharacterModelBone;

package/dist/bone.js

@@ -12,3 +12,7 @@ export function CharacterModelBone({ bone, children }) {
     }
     return (_jsx(Fragment, { children: createPortal(_jsx("group", { quaternion: model.boneRotationOffset, children: children }), boneObject) }, boneObject.id));
 }
+/**
+ * @deprecated use CharacterModelBone instead
+ */
+export const VrmCharacterModelBone = CharacterModelBone;

package/dist/gamepad.d.ts

@@ -1,2 +1 @@
-import { Input } from '@pmndrs/viverse';
-export declare function useXRControllerInput(): Input<{}>;
+export declare function useXRControllerLocomotionActionBindings(): void;

package/dist/gamepad.js

@@ -1,38 +1,27 @@
-import { MoveForwardField, LastTimeJumpPressedField, MoveLeftField, MoveRightField, MoveBackwardField, RunField, } from '@pmndrs/viverse';
+import { JumpAction, MoveBackwardAction, MoveForwardAction, MoveLeftAction, MoveRightAction, } from '@pmndrs/viverse';
+import { useFrame } from '@react-three/fiber';
 import { useXRControllerButtonEvent, useXRInputSourceState } from '@react-three/xr';
-import { useMemo, useRef } from 'react';
-export function useXRControllerInput() {
+import { useEffect, useRef } from 'react';
+export function useXRControllerLocomotionActionBindings() {
     const leftController = useXRInputSourceState('controller', 'left');
-    const lastAPressed = useRef(null);
     const rightController = useXRInputSourceState('controller', 'right');
-    useXRControllerButtonEvent(rightController, 'a-button', (state) => state === 'pressed' && (lastAPressed.current = performance.now() / 1000));
-    return useMemo(() => ({
-        get(field) {
-            switch (field) {
-                case MoveForwardField:
-                case MoveBackwardField: {
-                    const thumbstickYAxis = leftController?.gamepad?.['xr-standard-thumbstick']?.yAxis;
-                    if (thumbstickYAxis == null) {
-                        return undefined;
-                    }
-                    return field === MoveBackwardField
-                        ? Math.max(0, thumbstickYAxis)
-                        : Math.max(0, -thumbstickYAxis);
-                }
-                case MoveLeftField:
-                case MoveRightField: {
-                    const thumbstickXAxis = leftController?.gamepad?.['xr-standard-thumbstick']?.xAxis;
-                    if (thumbstickXAxis == null) {
-                        return undefined;
-                    }
-                    return field === MoveLeftField ? Math.max(0, -thumbstickXAxis) : Math.max(0, thumbstickXAxis);
-                }
-                case LastTimeJumpPressedField:
-                    return lastAPressed.current;
-                case RunField:
-                    return (leftController?.gamepad?.['xr-standard-trigger']?.state === 'pressed');
-            }
-            return undefined;
-        },
-    }), [leftController]);
+    useXRControllerButtonEvent(rightController, 'a-button', (state) => state === 'pressed' && JumpAction.emit(undefined));
+    const forwardWriterRef = useRef(undefined);
+    const backwardWriterRef = useRef(undefined);
+    const leftWriterRef = useRef(undefined);
+    const rightWriterRef = useRef(undefined);
+    useEffect(() => {
+        const abortController = new AbortController();
+        forwardWriterRef.current = MoveForwardAction.createWriter(abortController.signal);
+        backwardWriterRef.current = MoveBackwardAction.createWriter(abortController.signal);
+        leftWriterRef.current = MoveLeftAction.createWriter(abortController.signal);
+        rightWriterRef.current = MoveRightAction.createWriter(abortController.signal);
+        return () => abortController.abort();
+    }, [leftController]);
+    useFrame(() => {
+        forwardWriterRef.current?.write(-Math.min(0, leftController?.gamepad?.['xr-standard-thumbstick']?.yAxis ?? 0));
+        backwardWriterRef.current?.write(Math.max(0, leftController?.gamepad?.['xr-standard-thumbstick']?.yAxis ?? 0));
+        leftWriterRef.current?.write(-Math.min(0, leftController?.gamepad?.['xr-standard-thumbstick']?.xAxis ?? 0));
+        rightWriterRef.current?.write(Math.max(0, leftController?.gamepad?.['xr-standard-thumbstick']?.xAxis ?? 0));
+    });
 }

package/dist/index.d.ts

@@ -69,6 +69,8 @@ export declare function useViversePublicAvatarList(): Awaited<ReturnType<AvatarC
 export declare function useViversePublicAvatarByID(id: string): Awaited<ReturnType<AvatarClient['getPublicAvatarByID']>> | undefined;
 export * from './material.js';
 export * as Vanilla from '@pmndrs/viverse';
+export { EventAction, StateAction, BooleanOr, PointerLockRotateZoomActionBindings, KeyboardLocomotionActionBindings, updateSimpleCharacterVelocity, MoveRightAction, MoveLeftAction, MoveForwardAction, MoveBackwardAction, RunAction, JumpAction, ZoomAction, RotateYawAction, RotatePitchAction, shouldJump, lowerBody, upperBody, WalkAnimationUrl, RunAnimationUrl, IdleAnimationUrl, JumpUpAnimationUrl, JumpLoopAnimationUrl, JumpDownAnimationUrl, FirstPersonCharacterCameraBehavior, BvhCharacterPhysics, type BvhCharacterPhysicsOptions, BvhPhysicsWorld, bvhBoneMap, CharacterCameraBehavior, } from '@pmndrs/viverse';
+export type { VRMHumanBoneName } from '@pmndrs/viverse';
 export * from '@viverse/sdk';
 export * from '@viverse/sdk/avatar-client';
 export * from './gamepad.js';

package/dist/index.js

@@ -154,6 +154,8 @@ export function useViversePublicAvatarByID(id) {
 }
 export * from './material.js';
 export * as Vanilla from '@pmndrs/viverse';
+// Direct re-exports from @pmndrs/viverse used in examples and docs
+export { EventAction, StateAction, BooleanOr, PointerLockRotateZoomActionBindings, KeyboardLocomotionActionBindings, updateSimpleCharacterVelocity, MoveRightAction, MoveLeftAction, MoveForwardAction, MoveBackwardAction, RunAction, JumpAction, ZoomAction, RotateYawAction, RotatePitchAction, shouldJump, lowerBody, upperBody, WalkAnimationUrl, RunAnimationUrl, IdleAnimationUrl, JumpUpAnimationUrl, JumpLoopAnimationUrl, JumpDownAnimationUrl, FirstPersonCharacterCameraBehavior, BvhCharacterPhysics, BvhPhysicsWorld, bvhBoneMap, CharacterCameraBehavior, } from '@pmndrs/viverse';
 export * from '@viverse/sdk';
 export * from '@viverse/sdk/avatar-client';
 export * from './gamepad.js';

package/dist/simple.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { RunField, shouldJump, updateSimpleCharacterInputVelocity, updateSimpleCharacterRotation, } from '@pmndrs/viverse';
+import { RunAction, shouldJump, updateSimpleCharacterVelocity, updateSimpleCharacterRotation, } from '@pmndrs/viverse';
+import { IdleAnimationUrl, JumpDownAnimationUrl, JumpForwardAnimationUrl, JumpLoopAnimationUrl, JumpUpAnimationUrl, RunAnimationUrl, WalkAnimationUrl, } from '@pmndrs/viverse/src/animation/default.js';
 import { useFrame } from '@react-three/fiber';
 import { Graph, GrapthState, Parallel, RunTimeline, Switch, SwitchCase, timePassed } from '@react-three/timeline';
 import { forwardRef, Suspense, useImperativeHandle, useRef } from 'react';
@@ -8,20 +9,20 @@ import { CharacterAnimationAction } from './animation.js';
 import { useViverseActiveAvatar } from './index.js';
 import { CharacterModelProvider } from './model.js';
 import { useBvhCharacterPhysics } from './physics.js';
-import { useCharacterCameraBehavior, useCharacterModelLoader, useInputSystem } from './utils.js';
-export const SimpleCharacter = forwardRef(({ input, inputOptions, cameraBehavior, children, movement, physics: physicsOptions, model, useViverseAvatar, animation, ...props }, ref) => {
+import { useCharacterCameraBehavior, useCharacterModelLoader, useSimpleCharacterActionBindings } from './utils.js';
+export const SimpleCharacter = forwardRef(({ input, actionBindings, inputOptions, actionBindingOptions, cameraBehavior, children, movement, physics: physicsOptions, model, useViverseAvatar, animation, ...props }, ref) => {
+    useSimpleCharacterActionBindings(actionBindings ?? input, actionBindingOptions ?? inputOptions);
     const internalRef = useRef(null);
-    const inputSystem = useInputSystem(input, inputOptions);
-    useCharacterCameraBehavior(internalRef, inputSystem, cameraBehavior);
+    useCharacterCameraBehavior(internalRef, cameraBehavior);
     const physics = useBvhCharacterPhysics(internalRef, physicsOptions);
     const lastJumpTimeRef = useRef(-Infinity);
-    useFrame((state) => updateSimpleCharacterInputVelocity(state.camera, inputSystem, physics, movement));
+    useFrame((state) => updateSimpleCharacterVelocity(state.camera, physics, movement));
     useFrame(() => {
         if (model != false || movement?.jump === false) {
             return;
         }
         const bufferTime = movement?.jump === true ? undefined : movement?.jump?.bufferTime;
-        if (shouldJump(physics, inputSystem, lastJumpTimeRef.current, bufferTime)) {
+        if (shouldJump(physics, lastJumpTimeRef.current, bufferTime)) {
             lastJumpTimeRef.current = performance.now() / 1000;
             physics.applyVelocity(
             // eslint-disable-next-line @react-three/no-new-in-loop
@@ -29,9 +30,9 @@ export const SimpleCharacter = forwardRef(({ input, inputOptions, cameraBehavior
         }
     });
     useImperativeHandle(ref, () => internalRef.current, []);
-    return (_jsx("group", { ...props, ref: internalRef, children: model == false ? (children) : (_jsx(SimpleCharacterModel, { animation: animation, inputSystem: inputSystem, physics: physics, model: model == true ? undefined : model, movement: movement, useViverseAvatar: useViverseAvatar, children: children })) }));
+    return (_jsx("group", { ...props, ref: internalRef, children: model == false ? (children) : (_jsx(SimpleCharacterModel, { animation: animation, physics: physics, model: model == true ? undefined : model, movement: movement, useViverseAvatar: useViverseAvatar, children: children })) }));
 });
-function SimpleCharacterModel({ children, model: modelOptions, movement, physics, useViverseAvatar = true, inputSystem, animation, }) {
+function SimpleCharacterModel({ children, model: modelOptions, movement, physics, useViverseAvatar = true, animation, }) {
     const avatar = useViverseActiveAvatar();
     const model = useCharacterModelLoader(avatar != null && useViverseAvatar
         ? {
@@ -44,15 +45,15 @@ function SimpleCharacterModel({ children, model: modelOptions, movement, physics
     useFrame((state, delta) => updateSimpleCharacterRotation(delta, physics, state.camera, model, animation));
     return (_jsx(_Fragment, { children: _jsxs(CharacterModelProvider, { model: model, children: [_jsx(RunTimeline, { children: _jsxs(Graph, { enterState: "move", children: [_jsx(GrapthState, { name: "move", transitionTo: {
                                     jumpStart: {
-                                        whenUpdate: () => shouldJump(physics, inputSystem, lastJumpTimeRef.current),
+                                        whenUpdate: () => shouldJump(physics, lastJumpTimeRef.current),
                                     },
                                     jumpLoop: { whenUpdate: () => !physics.isGrounded },
-                                }, children: _jsxs(Switch, { children: [_jsx(SwitchCase, { index: 0, condition: () => physics.inputVelocity.lengthSq() === 0, children: _jsx(Suspense, { fallback: null, children: _jsx(CharacterAnimationAction, { ...animation?.idle, fadeDuration: animation?.crossFadeDuration, url: { default: 'idle' } }) }) }), movement?.run != false && (_jsx(SwitchCase, { index: 1, condition: () => inputSystem.get(RunField), children: _jsx(Suspense, { fallback: null, children: _jsx(CharacterAnimationAction, { ...animation?.run, fadeDuration: animation?.crossFadeDuration, scaleTime: 0.8, url: { default: 'run' } }) }) })), movement?.walk != false && (_jsx(SwitchCase, { index: 2, children: _jsx(Suspense, { fallback: null, children: _jsx(CharacterAnimationAction, { ...animation?.walk, fadeDuration: animation?.crossFadeDuration, scaleTime: 0.5, url: { default: 'walk' } }) }) })), _jsx(SwitchCase, { index: 3, children: _jsx(Suspense, { fallback: null, children: _jsx(CharacterAnimationAction, { ...animation?.idle, fadeDuration: animation?.crossFadeDuration, url: { default: 'idle' } }) }) })] }) }), _jsx(GrapthState, { name: "jumpStart", transitionTo: {
+                                }, children: _jsxs(Switch, { children: [_jsx(SwitchCase, { index: 0, condition: () => physics.inputVelocity.lengthSq() === 0, children: _jsx(Suspense, { fallback: null, children: _jsx(CharacterAnimationAction, { ...animation?.idle, fadeDuration: animation?.crossFadeDuration, url: IdleAnimationUrl }) }) }), movement?.run != false && (_jsx(SwitchCase, { index: 1, condition: () => RunAction.get(), children: _jsx(Suspense, { fallback: null, children: _jsx(CharacterAnimationAction, { ...animation?.run, fadeDuration: animation?.crossFadeDuration, scaleTime: 0.8, url: RunAnimationUrl }) }) })), movement?.walk != false && (_jsx(SwitchCase, { index: 2, children: _jsx(Suspense, { fallback: null, children: _jsx(CharacterAnimationAction, { ...animation?.walk, fadeDuration: animation?.crossFadeDuration, scaleTime: 0.5, url: WalkAnimationUrl }) }) })), _jsx(SwitchCase, { index: 3, children: _jsx(Suspense, { fallback: null, children: _jsx(CharacterAnimationAction, { ...animation?.idle, fadeDuration: animation?.crossFadeDuration, url: IdleAnimationUrl }) }) })] }) }), _jsx(GrapthState, { name: "jumpStart", transitionTo: {
                                     jumpDown: { whenUpdate: () => !physics.isGrounded },
-                                    finally: () => (inputSystem.get(RunField) ? 'jumpForward' : 'jumpUp'),
-                                }, children: _jsx(Parallel, { type: "race", children: _jsxs(Suspense, { fallback: null, children: [_jsx(CharacterAnimationAction, { ...animation?.jumpUp, fadeDuration: animation?.crossFadeDuration ?? 0.1, until: () => timePassed(0.2, 'seconds'), update: () => void physics.inputVelocity.multiplyScalar(0.3), paused: true, url: { default: 'jumpUp' } }), _jsx(CharacterAnimationAction, { ...animation?.jumpForward, fadeDuration: animation?.crossFadeDuration ?? 0.1, paused: true, url: { default: 'jumpForward' } })] }) }) }), _jsx(GrapthState, { name: "jumpLoop", transitionTo: {
+                                    finally: () => (RunAction.get() ? 'jumpForward' : 'jumpUp'),
+                                }, children: _jsx(Parallel, { type: "race", children: _jsxs(Suspense, { fallback: null, children: [_jsx(CharacterAnimationAction, { ...animation?.jumpUp, fadeDuration: animation?.crossFadeDuration ?? 0.1, until: () => timePassed(0.2, 'seconds'), update: () => void physics.inputVelocity.multiplyScalar(0.3), paused: true, url: JumpUpAnimationUrl }), _jsx(CharacterAnimationAction, { ...animation?.jumpForward, fadeDuration: animation?.crossFadeDuration ?? 0.1, paused: true, url: JumpForwardAnimationUrl })] }) }) }), _jsx(GrapthState, { name: "jumpLoop", transitionTo: {
                                     jumpDown: { whenUpdate: () => physics.isGrounded },
-                                }, children: _jsx(Suspense, { fallback: null, children: _jsx(CharacterAnimationAction, { ...animation?.jumpLoop, fadeDuration: animation?.crossFadeDuration, url: { default: 'jumpLoop' } }) }) }), _jsx(GrapthState, { name: "jumpUp", transitionTo: {
+                                }, children: _jsx(Suspense, { fallback: null, children: _jsx(CharacterAnimationAction, { ...animation?.jumpLoop, fadeDuration: animation?.crossFadeDuration, url: JumpLoopAnimationUrl }) }) }), _jsx(GrapthState, { name: "jumpUp", transitionTo: {
                                     jumpDown: {
                                         whenUpdate: (_, _clock, actionTime) => actionTime > 0.3 && physics.isGrounded,
                                     },
@@ -60,8 +61,8 @@ function SimpleCharacterModel({ children, model: modelOptions, movement, physics
                                 }, children: _jsx(Suspense, { fallback: null, children: _jsx(CharacterAnimationAction, { ...animation?.jumpUp, fadeDuration: animation?.crossFadeDuration, loop: LoopOnce, init: () => {
                                             lastJumpTimeRef.current = performance.now() / 1000;
                                             physics.applyVelocity(new Vector3(0, (typeof movement?.jump === 'object' ? movement?.jump.speed : undefined) ?? 8, 0));
-                                        }, url: { default: 'jumpUp' } }) }) }), _jsx(GrapthState, { name: "jumpForward", transitionTo: { finally: () => (physics.isGrounded ? 'move' : 'jumpLoop') }, children: _jsx(Suspense, { fallback: null, children: _jsx(CharacterAnimationAction, { ...animation?.jumpForward, fadeDuration: animation?.crossFadeDuration, scaleTime: 0.9, init: () => {
+                                        }, url: JumpUpAnimationUrl }) }) }), _jsx(GrapthState, { name: "jumpForward", transitionTo: { finally: () => (physics.isGrounded ? 'move' : 'jumpLoop') }, children: _jsx(Suspense, { fallback: null, children: _jsx(CharacterAnimationAction, { ...animation?.jumpForward, fadeDuration: animation?.crossFadeDuration, scaleTime: 0.9, init: () => {
                                             lastJumpTimeRef.current = performance.now() / 1000;
                                             physics.applyVelocity(new Vector3(0, 8, 0));
-                                        }, loop: LoopOnce, url: { default: 'jumpForward' } }) }) }), _jsx(GrapthState, { name: "jumpDown", transitionTo: { finally: 'move' }, children: _jsx(Suspense, { fallback: null, children: _jsx(CharacterAnimationAction, { ...animation?.jumpDown, fadeDuration: animation?.crossFadeDuration, until: () => timePassed(150, 'milliseconds'), loop: LoopOnce, url: { default: 'jumpDown' } }) }) })] }) }), _jsx("primitive", { object: model.scene }), children] }) }));
+                                        }, loop: LoopOnce, url: JumpForwardAnimationUrl }) }) }), _jsx(GrapthState, { name: "jumpDown", transitionTo: { finally: 'move' }, children: _jsx(Suspense, { fallback: null, children: _jsx(CharacterAnimationAction, { ...animation?.jumpDown, fadeDuration: animation?.crossFadeDuration, until: () => timePassed(150, 'milliseconds'), loop: LoopOnce, url: JumpDownAnimationUrl }) }) })] }) }), _jsx("primitive", { object: model.scene }), children] }) }));
 }

package/dist/utils.d.ts

@@ -1,9 +1,46 @@
-import { CharacterAnimationOptions, CharacterModelOptions, InputSystem, SimpleCharacterCameraBehaviorOptions, CharacterModel, Input } from '@pmndrs/viverse';
+import { CharacterCameraBehavior, CharacterAnimationOptions, CharacterModelOptions, CharacterCameraBehaviorOptions, CharacterModel, SimpleCharacterActionBindingOptions, WriteonlyEventAction, StateAction } from '@pmndrs/viverse';
 import { RefObject } from 'react';
 import { Object3D } from 'three';
-export declare function useCharacterCameraBehavior(model: Object3D | RefObject<Object3D | null>, inputSystem: InputSystem, options?: SimpleCharacterCameraBehaviorOptions): void;
-export declare function useCharacterModelLoader(options?: CharacterModelOptions): CharacterModel;
+export declare function useCharacterCameraBehavior(model: Object3D | RefObject<Object3D | null>, options?: CharacterCameraBehaviorOptions): RefObject<CharacterCameraBehavior | undefined>;
+export declare function useCharacterModelLoader({ useViverseAvatar, ...modelOptions }?: CharacterModelOptions & {
+    useViverseAvatar?: boolean;
+}): CharacterModel;
 export declare function useCharacterAnimationLoader(model: CharacterModel, options: CharacterAnimationOptions): import("three").AnimationClip;
-export declare function useInputSystem<T extends object>(inputs?: ReadonlyArray<Input<T> | {
-    new (domElement: HTMLElement): Input<T>;
-}>, options?: T): InputSystem<T>;
+/**
+ * @deprecated use the specific action binding hooks directly
+ */
+export declare function useSimpleCharacterActionBindings(actionBindingsClasses?: ReadonlyArray<{
+    new (domElement: HTMLElement, abortSignal: AbortSignal): unknown;
+}>, options?: SimpleCharacterActionBindingOptions): void;
+export declare function useKeyboardActionBinding(action: WriteonlyEventAction<KeyboardEvent> | StateAction<boolean>, options: {
+    keys: Array<string>;
+    requiresPointerLock?: boolean;
+}): void;
+export declare function usePointerButtonActionBinding(action: WriteonlyEventAction<PointerEvent> | StateAction<boolean>, options: {
+    domElement?: HTMLElement | RefObject<HTMLElement | null>;
+    buttons?: Array<number>;
+    requiresPointerLock?: boolean;
+}): void;
+export declare function usePointerCaptureRotateZoomActionBindings(options?: {
+    rotationSpeed?: number;
+    zoomSpeed?: number;
+}): void;
+export declare function usePointerLockRotateZoomActionBindings(options?: {
+    rotationSpeed?: number;
+    zoomSpeed?: number;
+    lockOnClick?: boolean;
+}): void;
+export declare function useKeyboardLocomotionActionBindings(options?: {
+    moveForwardKeys?: Array<string>;
+    moveBackwardKeys?: Array<string>;
+    moveLeftKeys?: Array<string>;
+    moveRightKeys?: Array<string>;
+    runKeys?: Array<string>;
+    jumpKeys?: Array<string>;
+    requiresPointerLock?: boolean;
+}): void;
+export declare function useScreenButton(image: string): HTMLElement;
+export declare function useScreenJoystickLocomotionActionBindings(options?: {
+    runDistancePx?: number;
+    deadZonePx?: number;
+}): void;

package/dist/utils.js

@@ -1,12 +1,21 @@
 import { VRM } from '@pixiv/three-vrm';
-import { CharacterCameraBehavior, flattenCharacterAnimationOptions, flattenCharacterModelOptions, InputSystem, loadCharacterModel, loadCharacterAnimation, ScreenJoystickInput, ScreenJumpButtonInput, PointerCaptureInput, LocomotionKeyboardInput, } from '@pmndrs/viverse';
+import { CharacterCameraBehavior, flattenCharacterAnimationOptions, flattenCharacterModelOptions, loadCharacterModel, loadCharacterAnimation, ScreenJoystickLocomotionActionBindings, ScreenButtonJumpActionBindings, PointerCaptureRotateZoomActionBindings, KeyboardLocomotionActionBindings, applySimpleCharacterActionBindingOptions, KeyboardActionBinding, PointerButtonActionBinding, defaultScreenButtonStyles, PointerLockRotateZoomActionBindings, DefaultMoveBackwardKeys, DefaultMoveForwardKeys, DefaultJumpKeys, DefaultMoveLeftKeys, DefaultMoveRightKeys, DefaultRunKeys, } from '@pmndrs/viverse';
 import { useFrame, useThree } from '@react-three/fiber';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { suspend } from 'suspend-react';
 import { Object3D } from 'three';
+import { useViverseActiveAvatar } from './index.js';
 import { useBvhPhysicsWorld } from './physics.js';
-export function useCharacterCameraBehavior(model, inputSystem, options) {
-    const behavior = useMemo(() => new CharacterCameraBehavior(), []);
+export function useCharacterCameraBehavior(model, options) {
+    const behaviorRef = useRef(undefined);
+    useEffect(() => {
+        const behavior = new CharacterCameraBehavior();
+        behaviorRef.current = behavior;
+        return () => {
+            behaviorRef.current = undefined;
+            behavior.dispose();
+        };
+    }, []);
     const world = useBvhPhysicsWorld();
     const raycast = useMemo(() => world.raycast.bind(world), [world]);
     useFrame((state, delta) => {
@@ -14,12 +23,23 @@ export function useCharacterCameraBehavior(model, inputSystem, options) {
         if (resolvedModel == null) {
             return;
         }
-        behavior.update(state.camera, resolvedModel, inputSystem, delta, raycast, options);
-    });
+        behaviorRef.current?.update(state.camera, resolvedModel, delta, raycast, options);
+    }, -1);
+    return behaviorRef;
 }
 const loadCharacterModelSymbol = Symbol('loadCharacterModel');
-export function useCharacterModelLoader(options) {
-    const model = suspend((_, ...params) => loadCharacterModel(...params), [loadCharacterModelSymbol, ...flattenCharacterModelOptions(options)]);
+export function useCharacterModelLoader({ useViverseAvatar = true, ...modelOptions } = {}) {
+    const avatar = useViverseActiveAvatar();
+    const model = suspend((_, ...params) => loadCharacterModel(...params), [
+        loadCharacterModelSymbol,
+        ...flattenCharacterModelOptions(avatar != null && useViverseAvatar
+            ? {
+                ...modelOptions,
+                type: 'vrm',
+                url: avatar?.vrmUrl,
+            }
+            : modelOptions),
+    ]);
     useFrame((_, delta) => {
         if (model instanceof VRM) {
             model.update(delta);
@@ -32,36 +52,167 @@ const loadCharacterAnimationSymbol = Symbol('loadCharacterAnimation');
 export function useCharacterAnimationLoader(model, options) {
     return suspend((_, ...params) => loadCharacterAnimation(...params), [loadCharacterAnimationSymbol, model, ...flattenCharacterAnimationOptions(options)]);
 }
-export function useInputSystem(inputs = [
-    ScreenJoystickInput,
-    ScreenJumpButtonInput,
-    PointerCaptureInput,
-    LocomotionKeyboardInput,
-], options = {}) {
+/**
+ * @deprecated use the specific action binding hooks directly
+ */
+export function useSimpleCharacterActionBindings(actionBindingsClasses = [
+    ScreenJoystickLocomotionActionBindings,
+    ScreenButtonJumpActionBindings,
+    PointerCaptureRotateZoomActionBindings,
+    KeyboardLocomotionActionBindings,
+], options) {
     const dom = useThree((s) => s.gl.domElement);
-    const optionsRef = useMemo(() => ({}), []);
-    //clearing and copying the options to optionsRef
-    for (const key in optionsRef) {
-        delete optionsRef[key];
-    }
-    Object.assign(optionsRef, options);
+    const actionBindingsList = useMemo(() => [], 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const system = useMemo(() => new InputSystem(optionsRef), []);
+    [dom]);
     useEffect(() => {
-        const removedInputs = new Set(system.inputs);
-        for (const input of inputs) {
-            const existingInput = system.inputs.find((existingInput) => typeof input === 'function' ? existingInput instanceof input.constructor : existingInput === input);
-            if (existingInput != null) {
-                removedInputs.delete(existingInput);
+        const removeActionBindingsSet = new Set(actionBindingsList);
+        for (const actionBindingsClass of actionBindingsClasses) {
+            const existingActionBindings = actionBindingsList.find((existingActionBindings) => existingActionBindings instanceof actionBindingsClass);
+            if (existingActionBindings != null) {
+                removeActionBindingsSet.delete(existingActionBindings);
                 continue;
             }
-            system.add(typeof input === 'function' ? new input(dom) : input);
+            const abortController = new AbortController();
+            actionBindingsList.push({ actionBindings: new actionBindingsClass(dom, abortController.signal), abortController });
+        }
+        for (const entry of removeActionBindingsSet) {
+            entry.abortController.abort();
+            const index = actionBindingsList.indexOf(entry);
+            if (index != -1) {
+                actionBindingsList.splice(index, 1);
+            }
+        }
+        applySimpleCharacterActionBindingOptions(actionBindingsList, options);
+    });
+    useEffect(() => () => {
+        actionBindingsList.forEach(({ abortController }) => abortController.abort());
+        actionBindingsList.length = 0;
+    }, [actionBindingsList]);
+}
+export function useKeyboardActionBinding(action, options) {
+    const ref = useRef(undefined);
+    const domElement = useThree((s) => s.gl.domElement);
+    useEffect(() => {
+        const abortController = new AbortController();
+        ref.current = new KeyboardActionBinding(action, domElement, abortController.signal);
+        return () => abortController.abort();
+    }, [action, domElement]);
+    useEffect(() => {
+        if (ref.current == null) {
+            return;
+        }
+        ref.current.keys = options.keys;
+        ref.current.requiresPointerLock = options.requiresPointerLock;
+    });
+}
+export function usePointerButtonActionBinding(action, options) {
+    const ref = useRef(undefined);
+    const canvasDomElement = useThree((s) => s.gl.domElement);
+    const domElement = options.domElement ?? canvasDomElement;
+    useEffect(() => {
+        const abortController = new AbortController();
+        ref.current = new PointerButtonActionBinding(action, domElement instanceof HTMLElement ? domElement : domElement.current, abortController.signal);
+        return () => abortController.abort();
+    }, [action, domElement]);
+    useEffect(() => {
+        if (ref.current == null) {
+            return;
+        }
+        ref.current.buttons = options.buttons;
+        ref.current.requiresPointerLock = options.requiresPointerLock;
+    });
+}
+export function usePointerCaptureRotateZoomActionBindings(options) {
+    const ref = useRef(undefined);
+    const domElement = useThree((s) => s.gl.domElement);
+    useEffect(() => {
+        const abortController = new AbortController();
+        ref.current = new PointerCaptureRotateZoomActionBindings(domElement, abortController.signal);
+        return () => abortController.abort();
+    }, [domElement]);
+    useEffect(() => {
+        if (ref.current == null) {
+            return;
         }
-        for (const removedInput of removedInputs) {
-            system.remove(removedInput);
-            removedInput.dispose?.();
+        ref.current.rotationSpeed = options?.rotationSpeed;
+        ref.current.zoomSpeed = options?.zoomSpeed;
+    });
+}
+export function usePointerLockRotateZoomActionBindings(options) {
+    const ref = useRef(undefined);
+    const domElement = useThree((s) => s.gl.domElement);
+    useEffect(() => {
+        const abortController = new AbortController();
+        ref.current = new PointerLockRotateZoomActionBindings(domElement, abortController.signal);
+        return () => abortController.abort();
+    }, [domElement]);
+    useEffect(() => {
+        if (ref.current == null) {
+            return;
+        }
+        ref.current.lockOnClick = options?.lockOnClick;
+        ref.current.rotationSpeed = options?.rotationSpeed;
+        ref.current.zoomSpeed = options?.zoomSpeed;
+    });
+}
+export function useKeyboardLocomotionActionBindings(options) {
+    const ref = useRef(undefined);
+    const domElement = useThree((s) => s.gl.domElement);
+    useEffect(() => {
+        const abortController = new AbortController();
+        ref.current = new KeyboardLocomotionActionBindings(domElement, abortController.signal);
+        return () => abortController.abort();
+    }, [domElement]);
+    useEffect(() => {
+        if (ref.current == null) {
+            return;
+        }
+        ref.current.moveBackwardBinding.keys = options?.moveBackwardKeys ?? DefaultMoveBackwardKeys;
+        ref.current.moveBackwardBinding.requiresPointerLock = options?.requiresPointerLock;
+        ref.current.moveForwardBinding.keys = options?.moveForwardKeys ?? DefaultMoveForwardKeys;
+        ref.current.moveForwardBinding.requiresPointerLock = options?.requiresPointerLock;
+        ref.current.jumpBinding.keys = options?.jumpKeys ?? DefaultJumpKeys;
+        ref.current.jumpBinding.requiresPointerLock = options?.requiresPointerLock;
+        ref.current.moveLeftBinding.keys = options?.moveLeftKeys ?? DefaultMoveLeftKeys;
+        ref.current.moveLeftBinding.requiresPointerLock = options?.requiresPointerLock;
+        ref.current.moveRightBinding.keys = options?.moveRightKeys ?? DefaultMoveRightKeys;
+        ref.current.moveRightBinding.requiresPointerLock = options?.requiresPointerLock;
+        ref.current.runBinding.keys = options?.runKeys ?? DefaultRunKeys;
+        ref.current.runBinding.requiresPointerLock = options?.requiresPointerLock;
+    });
+}
+export function useScreenButton(image) {
+    const element = useMemo(() => document.createElement('div'), []);
+    element.style.backgroundImage = image;
+    const domElement = useThree((s) => s.gl.domElement);
+    useEffect(() => {
+        domElement.className = 'viverse-button viverse-jump mobile-only';
+        const parent = domElement.parentNode ?? domElement;
+        parent.appendChild(element);
+        Object.assign(element.style, defaultScreenButtonStyles);
+        const stopPropagation = (e) => e.stopPropagation();
+        element.addEventListener('pointerdown', stopPropagation);
+        return () => {
+            element.remove();
+            element.removeEventListener('pointerdown', stopPropagation);
+        };
+    }, [element, domElement]);
+    return element;
+}
+export function useScreenJoystickLocomotionActionBindings(options) {
+    const ref = useRef(undefined);
+    const domElement = useThree((s) => s.gl.domElement);
+    useEffect(() => {
+        const abortController = new AbortController();
+        ref.current = new ScreenJoystickLocomotionActionBindings(domElement, abortController.signal);
+        return () => abortController.abort();
+    }, [domElement]);
+    useEffect(() => {
+        if (ref.current == null) {
+            return;
         }
+        ref.current.deadZonePx = options?.deadZonePx;
+        ref.current.runDistancePx = options?.runDistancePx;
     });
-    useEffect(() => () => system.inputs.forEach((input) => input.dispose?.()), [system]);
-    return system;
 }

package/package.json

@@ -24,12 +24,12 @@
   ],
   "dependencies": {
     "@viverse/sdk": "^1.2.10-alpha.0",
-    "@react-three/timeline": "^0.3.5",
+    "@react-three/timeline": "^0.3.7",
     "suspend-react": "^0.1.3",
     "@pixiv/three-vrm": "^3.4.2",
     "zustand": "^5.0.6",
     "@react-three/xr": "^6.6.20",
-    "@pmndrs/viverse": "^0.2.0"
+    "@pmndrs/viverse": "^0.2.2"
   },
   "peerDependencies": {
     "@react-three/fiber": "*"
@@ -40,7 +40,7 @@
     "@types/react": "^19.1.8",
     "react": "^19.1.0"
   },
-  "version": "0.2.0",
+  "version": "0.2.2",
   "scripts": {
     "build": "tsc",
     "check:prettier": "prettier --check src",