@react-three/viverse 0.2.0 → 0.2.1

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 useXRControllerInput(): 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';
+import { useEffect, useRef } from 'react';
 export function useXRControllerInput() {
     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());
+    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/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, updateSimpleCharacterInputVelocity, 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';
+import { useCharacterCameraBehavior, useCharacterModelLoader, useSimpleCharacterInputs } from './utils.js';
 export const SimpleCharacter = forwardRef(({ input, inputOptions, cameraBehavior, children, movement, physics: physicsOptions, model, useViverseAvatar, animation, ...props }, ref) => {
+    useSimpleCharacterInputs(input, 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) => updateSimpleCharacterInputVelocity(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,14 @@
-import { CharacterAnimationOptions, CharacterModelOptions, InputSystem, SimpleCharacterCameraBehaviorOptions, CharacterModel, Input } from '@pmndrs/viverse';
+import { CharacterCameraBehavior, CharacterAnimationOptions, CharacterModelOptions, SimpleCharacterCameraBehaviorOptions, CharacterModel, SimpleCharacterInputOptions } 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 useCharacterCameraBehavior(model: Object3D | RefObject<Object3D | null>, options?: SimpleCharacterCameraBehaviorOptions): RefObject<CharacterCameraBehavior | undefined>;
 export declare function useCharacterModelLoader(options?: CharacterModelOptions): 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 inputs directly
+ */
+export declare function useSimpleCharacterInputs(inputsClasses?: ReadonlyArray<{
+    new (domElement: HTMLElement): {
+        dispose(): void;
+    };
+}>, options?: SimpleCharacterInputOptions): void;

package/dist/utils.js

@@ -1,12 +1,20 @@
 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, ScreenJoystickInput, ScreenJumpButtonInput, PointerCaptureInput, LocomotionKeyboardInput, applySimpleCharacterInputOptions, } 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 { 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,8 +22,9 @@ 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);
     });
+    return behaviorRef;
 }
 const loadCharacterModelSymbol = Symbol('loadCharacterModel');
 export function useCharacterModelLoader(options) {
@@ -32,36 +41,39 @@ const loadCharacterAnimationSymbol = Symbol('loadCharacterAnimation');
 export function useCharacterAnimationLoader(model, options) {
     return suspend((_, ...params) => loadCharacterAnimation(...params), [loadCharacterAnimationSymbol, model, ...flattenCharacterAnimationOptions(options)]);
 }
-export function useInputSystem(inputs = [
+/**
+ * @deprecated use inputs directly
+ */
+export function useSimpleCharacterInputs(inputsClasses = [
     ScreenJoystickInput,
     ScreenJumpButtonInput,
     PointerCaptureInput,
     LocomotionKeyboardInput,
-], options = {}) {
+], 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);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    const system = useMemo(() => new InputSystem(optionsRef), []);
+    const inputs = useMemo(() => [], [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);
+        const removedInputs = new Set(inputs);
+        for (const inputClass of inputsClasses) {
+            const existingInput = inputs.find((existingInput) => existingInput instanceof inputClass);
             if (existingInput != null) {
                 removedInputs.delete(existingInput);
                 continue;
             }
-            system.add(typeof input === 'function' ? new input(dom) : input);
+            inputs.push(new inputClass(dom));
         }
         for (const removedInput of removedInputs) {
-            system.remove(removedInput);
-            removedInput.dispose?.();
+            removedInput.dispose();
+            const index = inputs.indexOf(removedInput);
+            if (index != -1) {
+                inputs.splice(index, 1);
+            }
         }
+        applySimpleCharacterInputOptions(inputs, options);
     });
-    useEffect(() => () => system.inputs.forEach((input) => input.dispose?.()), [system]);
-    return system;
+    useEffect(() => () => {
+        inputs.forEach((input) => input.dispose());
+        inputs.length = 0;
+    }, [inputs]);
 }

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.1"
   },
   "peerDependencies": {
     "@react-three/fiber": "*"
@@ -40,7 +40,7 @@
     "@types/react": "^19.1.8",
     "react": "^19.1.0"
   },
-  "version": "0.2.0",
+  "version": "0.2.1",
   "scripts": {
     "build": "tsc",
     "check:prettier": "prettier --check src",