@react-three/viverse 0.1.19 → 0.2.0

package/dist/animation.d.ts

@@ -0,0 +1,9 @@
+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 }: {
+    dependencies?: Array<unknown>;
+    until?: () => Promise<unknown>;
+    loop?: AnimationActionLoopStyles;
+} & Omit<ActionParams<RootState>, 'until'> & CharacterAnimationOptions & StartAnimationOptions): import("react/jsx-runtime").JSX.Element;

package/dist/animation.js

@@ -0,0 +1,18 @@
+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 { LoopRepeat } from 'three';
+import { useCharacterModel } from './model.js';
+import { useCharacterAnimationLoader } from './utils.js';
+export function CharacterAnimationAction({ until, init, dependencies, update, fadeDuration = 0.1, paused, loop, ...animationOptions }) {
+    const model = useCharacterModel();
+    const clip = useCharacterAnimationLoader(model, animationOptions);
+    const animation = useMemo(() => model.mixer.clipAction(clip), [clip, model]);
+    animation.clampWhenFinished = true;
+    animation.loop = loop ?? LoopRepeat;
+    return (_jsx(Action, { init: () => {
+            startAnimation(animation, model.currentAnimations, { fadeDuration, paused });
+            return init?.();
+        }, until: until ?? (() => animationFinished(animation)), update: update, dependencies: dependencies }));
+}

package/dist/bone.d.ts

@@ -0,0 +1,6 @@
+import { VRMHumanBoneName } from '@pixiv/three-vrm';
+import { ReactNode } from 'react';
+export declare function CharacterModelBone({ bone, children }: {
+    bone: VRMHumanBoneName;
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/bone.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { VRM } from '@pixiv/three-vrm';
+import { createPortal } from '@react-three/fiber';
+import { useMemo } from 'react';
+import { Fragment } from 'react/jsx-runtime';
+import { useCharacterModel } from './model.js';
+export function CharacterModelBone({ bone, children }) {
+    const model = useCharacterModel();
+    const boneObject = useMemo(() => (model instanceof VRM ? model.humanoid.getRawBoneNode(bone) : model.scene.getObjectByName(bone)), [model, bone]);
+    if (boneObject == null) {
+        return null;
+    }
+    return (_jsx(Fragment, { children: createPortal(_jsx("group", { quaternion: model.boneRotationOffset, children: children }), boneObject) }, boneObject.id));
+}

package/dist/gamepad.d.ts

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

package/dist/index.d.ts

@@ -67,10 +67,15 @@ export declare function useViversePublicAvatarList(): Awaited<ReturnType<AvatarC
  * Uses React Suspense for data fetching.
  */
 export declare function useViversePublicAvatarByID(id: string): Awaited<ReturnType<AvatarClient['getPublicAvatarByID']>> | undefined;
-export * from './character.js';
 export * from './material.js';
-export { mixamoBoneMap, FirstPersonCharacterCameraBehavior, SimpleCharacter as SimpleCharacterImpl, type SimpleCharacterOptions, LocomotionKeyboardInput, PointerCaptureInput, PointerLockInput, type InputField, InputSystem, type LocomotionKeyboardInputOptions, type PointerLockInputOptions, type PointerCaptureInputOptions, ScreenJoystickInput, type ScreenJoystickInputOptions, type SimpleCharacterInputOptions, ScreenJumpButtonInput, VRMHumanBoneName, } from '@pmndrs/viverse';
+export * as Vanilla from '@pmndrs/viverse';
 export * from '@viverse/sdk';
 export * from '@viverse/sdk/avatar-client';
 export * from './gamepad.js';
 export * from './mobile.js';
+export * from './physics.js';
+export * from './utils.js';
+export * from './model.js';
+export * from './animation.js';
+export * from './bone.js';
+export * from './simple.js';

package/dist/index.js

@@ -3,7 +3,7 @@ import { Client } from '@viverse/sdk';
 import AvatarClient from '@viverse/sdk/avatar-client';
 import { createContext, useCallback, useContext } from 'react';
 import { suspend, clear } from 'suspend-react';
-import { BvhPhysicsWorld } from './character.js';
+import { BvhPhysicsWorld } from './physics.js';
 // auth
 const viverseCheckAuthSymbol = Symbol('viverse-check-auth');
 const authSuspenseKeys = [];
@@ -152,10 +152,15 @@ export function useViversePublicAvatarByID(id) {
     const avatarClient = useViverseAvatarClient();
     return suspend(async () => avatarClient?.getPublicAvatarByID(id), [viversePublicAvatarByIDSymbol, avatarClient, id]);
 }
-export * from './character.js';
 export * from './material.js';
-export { mixamoBoneMap, FirstPersonCharacterCameraBehavior, SimpleCharacter as SimpleCharacterImpl, LocomotionKeyboardInput, PointerCaptureInput, PointerLockInput, InputSystem, ScreenJoystickInput, ScreenJumpButtonInput, VRMHumanBoneName, } from '@pmndrs/viverse';
+export * as Vanilla from '@pmndrs/viverse';
 export * from '@viverse/sdk';
 export * from '@viverse/sdk/avatar-client';
 export * from './gamepad.js';
 export * from './mobile.js';
+export * from './physics.js';
+export * from './utils.js';
+export * from './model.js';
+export * from './animation.js';
+export * from './bone.js';
+export * from './simple.js';

package/dist/model.d.ts

@@ -0,0 +1,7 @@
+import { CharacterModel } from '@pmndrs/viverse';
+import { ReactNode } from 'react';
+export declare function CharacterModelProvider({ model, children }: {
+    children?: ReactNode;
+    model: CharacterModel;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useCharacterModel(): CharacterModel;

package/dist/model.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const CharacterModelContext = createContext(undefined);
+export function CharacterModelProvider({ model, children }) {
+    return _jsx(CharacterModelContext.Provider, { value: model, children: children });
+}
+export function useCharacterModel() {
+    const model = useContext(CharacterModelContext);
+    if (model == null) {
+        throw new Error(`useCharacterModel can only be used inside a CharacterModelProvider`);
+    }
+    return model;
+}

package/dist/physics.d.ts

@@ -0,0 +1,36 @@
+import { BvhCharacterPhysics, BvhCharacterPhysicsOptions, BvhPhysicsWorld as VanillaBvhPhysicsWorld } from '@pmndrs/viverse';
+import { ReactNode, RefObject } from 'react';
+import { Object3D } from 'three';
+/**
+ * provides the bvh physics world context
+ */
+export declare function BvhPhysicsWorld({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useBvhPhysicsWorld(): VanillaBvhPhysicsWorld;
+export declare function useBvhCharacterPhysics(model: Object3D | RefObject<Object3D | null>, options?: BvhCharacterPhysicsOptions): BvhCharacterPhysics;
+/**
+ * @deprecated use <BvhPhysicsBody kinematic={false} /> instead (kinematic={false} can be skipped as its the default)
+ */
+export declare const FixedBvhPhysicsBody: import("react").ForwardRefExoticComponent<{
+    children?: ReactNode;
+} & import("react").RefAttributes<Object3D<import("three").Object3DEventMap>>>;
+/**
+ * allows to add all children as static (non-moving) objects as sensors to the bvh physics world
+ * @requires that the structure of the inner content is not changing or has a suspense boundary
+ * do not wrap the content inside in a suspense!
+ */
+export declare const BvhPhysicsSensor: import("react").ForwardRefExoticComponent<{
+    children?: ReactNode;
+    isStatic?: boolean;
+    onIntersectedChanged?: (intersected: boolean) => void;
+} & import("react").RefAttributes<Object3D<import("three").Object3DEventMap>>>;
+/**
+ * allows to add all children as static (non-moving) or kinematic (moving) objects as obstacles to the bvh physics world
+ * @requires that the structure of the inner content is not changing or has a suspense boundary
+ * do not wrap the content inside in a suspense!
+ */
+export declare const BvhPhysicsBody: import("react").ForwardRefExoticComponent<{
+    children?: ReactNode;
+    kinematic?: boolean;
+} & import("react").RefAttributes<Object3D<import("three").Object3DEventMap>>>;

package/dist/physics.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BvhCharacterPhysics, BvhPhysicsWorld as VanillaBvhPhysicsWorld, } from '@pmndrs/viverse';
+import { useFrame } from '@react-three/fiber';
+import { createContext, forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, } from 'react';
+import { Object3D } from 'three';
+const BvhPhyiscsWorldContext = createContext(undefined);
+/**
+ * provides the bvh physics world context
+ */
+export function BvhPhysicsWorld({ children }) {
+    const world = useMemo(() => new VanillaBvhPhysicsWorld(), []);
+    return _jsx(BvhPhyiscsWorldContext.Provider, { value: world, children: children });
+}
+export function useBvhPhysicsWorld() {
+    const world = useContext(BvhPhyiscsWorldContext);
+    if (world == null) {
+        throw new Error('useBvhPhysicsWorld must be used within a BvhPhysicsWorld component');
+    }
+    return world;
+}
+export function useBvhCharacterPhysics(model, options) {
+    const world = useBvhPhysicsWorld();
+    const characterPhysics = useMemo(() => new BvhCharacterPhysics(world), [world]);
+    useFrame((_, delta) => {
+        const resolvedModel = model instanceof Object3D ? model : model.current;
+        if (resolvedModel == null) {
+            return;
+        }
+        characterPhysics.update(resolvedModel, delta, options);
+    });
+    return characterPhysics;
+}
+/**
+ * @deprecated use <BvhPhysicsBody kinematic={false} /> instead (kinematic={false} can be skipped as its the default)
+ */
+export const FixedBvhPhysicsBody = forwardRef(({ children }, ref) => {
+    return _jsxs(BvhPhysicsBody, { children: [" ", children] });
+});
+/**
+ * allows to add all children as static (non-moving) objects as sensors to the bvh physics world
+ * @requires that the structure of the inner content is not changing or has a suspense boundary
+ * do not wrap the content inside in a suspense!
+ */
+export const BvhPhysicsSensor = forwardRef(({ children, isStatic = true, onIntersectedChanged }, ref) => {
+    const world = useBvhPhysicsWorld();
+    const internalRef = useRef(null);
+    const listenerRef = useRef(onIntersectedChanged);
+    listenerRef.current = onIntersectedChanged;
+    useEffect(() => {
+        const body = internalRef.current;
+        if (body == null) {
+            return;
+        }
+        world.addSensor(body, isStatic, (intersected) => listenerRef.current?.(intersected));
+        return () => world.removeSensor(body);
+    }, [world, isStatic]);
+    useImperativeHandle(ref, () => internalRef.current, []);
+    return _jsx("group", { ref: internalRef, children: children });
+});
+/**
+ * allows to add all children as static (non-moving) or kinematic (moving) objects as obstacles to the bvh physics world
+ * @requires that the structure of the inner content is not changing or has a suspense boundary
+ * do not wrap the content inside in a suspense!
+ */
+export const BvhPhysicsBody = forwardRef(({ children, kinematic = false }, ref) => {
+    const world = useBvhPhysicsWorld();
+    const internalRef = useRef(null);
+    useEffect(() => {
+        const body = internalRef.current;
+        if (body == null) {
+            return;
+        }
+        world.addBody(body, kinematic);
+        return () => world.removeBody(body);
+    }, [world, kinematic]);
+    useImperativeHandle(ref, () => internalRef.current, []);
+    return _jsx("group", { ref: internalRef, children: children });
+});

package/dist/simple.d.ts

@@ -0,0 +1,7 @@
+import { SimpleCharacterOptions } from '@pmndrs/viverse';
+import { ReactNode } from 'react';
+import { Group, Object3D } from 'three';
+export declare const SimpleCharacter: import("react").ForwardRefExoticComponent<Omit<{
+    children?: ReactNode;
+    useViverseAvatar?: boolean;
+} & SimpleCharacterOptions & import("@react-three/fiber/dist/declarations/src/core/utils.js").Mutable<import("@react-three/fiber/dist/declarations/src/core/utils.js").Overwrite<Partial<import("@react-three/fiber/dist/declarations/src/core/utils.js").Overwrite<Group<import("three").Object3DEventMap>, import("@react-three/fiber").MathProps<Group<import("three").Object3DEventMap>> & import("@react-three/fiber").ReactProps<Group<import("three").Object3DEventMap>> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<Group<import("three").Object3DEventMap>, typeof Group>, "object">>>, "ref"> & import("react").RefAttributes<Object3D<import("three").Object3DEventMap>>>;

package/dist/simple.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { RunField, shouldJump, updateSimpleCharacterInputVelocity, updateSimpleCharacterRotation, } from '@pmndrs/viverse';
+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';
+import { LoopOnce, Vector3 } from 'three';
+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) => {
+    const internalRef = useRef(null);
+    const inputSystem = useInputSystem(input, inputOptions);
+    useCharacterCameraBehavior(internalRef, inputSystem, cameraBehavior);
+    const physics = useBvhCharacterPhysics(internalRef, physicsOptions);
+    const lastJumpTimeRef = useRef(-Infinity);
+    useFrame((state) => updateSimpleCharacterInputVelocity(state.camera, inputSystem, 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)) {
+            lastJumpTimeRef.current = performance.now() / 1000;
+            physics.applyVelocity(
+            // eslint-disable-next-line @react-three/no-new-in-loop
+            new Vector3(0, (typeof movement?.jump === 'object' ? movement?.jump.speed : undefined) ?? 8, 0));
+        }
+    });
+    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 })) }));
+});
+function SimpleCharacterModel({ children, model: modelOptions, movement, physics, useViverseAvatar = true, inputSystem, animation, }) {
+    const avatar = useViverseActiveAvatar();
+    const model = useCharacterModelLoader(avatar != null && useViverseAvatar
+        ? {
+            type: 'vrm',
+            url: avatar?.vrmUrl,
+            ...modelOptions,
+        }
+        : modelOptions);
+    const lastJumpTimeRef = useRef(-Infinity);
+    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),
+                                    },
+                                    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: {
+                                    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: {
+                                    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: {
+                                    jumpDown: {
+                                        whenUpdate: (_, _clock, actionTime) => actionTime > 0.3 && physics.isGrounded,
+                                    },
+                                    finally: 'jumpLoop',
+                                }, 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: () => {
+                                            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] }) }));
+}

package/dist/utils.d.ts

@@ -0,0 +1,9 @@
+import { CharacterAnimationOptions, CharacterModelOptions, InputSystem, SimpleCharacterCameraBehaviorOptions, CharacterModel, Input } 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 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>;

package/dist/utils.js

@@ -0,0 +1,67 @@
+import { VRM } from '@pixiv/three-vrm';
+import { CharacterCameraBehavior, flattenCharacterAnimationOptions, flattenCharacterModelOptions, InputSystem, loadCharacterModel, loadCharacterAnimation, ScreenJoystickInput, ScreenJumpButtonInput, PointerCaptureInput, LocomotionKeyboardInput, } from '@pmndrs/viverse';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useEffect, useMemo } 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(), []);
+    const world = useBvhPhysicsWorld();
+    const raycast = useMemo(() => world.raycast.bind(world), [world]);
+    useFrame((state, delta) => {
+        const resolvedModel = model instanceof Object3D ? model : model.current;
+        if (resolvedModel == null) {
+            return;
+        }
+        behavior.update(state.camera, resolvedModel, inputSystem, delta, raycast, options);
+    });
+}
+const loadCharacterModelSymbol = Symbol('loadCharacterModel');
+export function useCharacterModelLoader(options) {
+    const model = suspend((_, ...params) => loadCharacterModel(...params), [loadCharacterModelSymbol, ...flattenCharacterModelOptions(options)]);
+    useFrame((_, delta) => {
+        if (model instanceof VRM) {
+            model.update(delta);
+        }
+        model.mixer.update(delta);
+    });
+    return model;
+}
+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 = {}) {
+    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), []);
+    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);
+                continue;
+            }
+            system.add(typeof input === 'function' ? new input(dom) : input);
+        }
+        for (const removedInput of removedInputs) {
+            system.remove(removedInput);
+            removedInput.dispose?.();
+        }
+    });
+    useEffect(() => () => system.inputs.forEach((input) => input.dispose?.()), [system]);
+    return system;
+}

package/package.json

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

package/dist/character.d.ts

@@ -1,51 +0,0 @@
-import { SimpleCharacterOptions, SimpleCharacter as SimpleCharacterImpl, VRMHumanBoneName } from '@pmndrs/viverse';
-import { ThreeElement } from '@react-three/fiber';
-import { ReactNode } from 'react';
-import { Group, Object3D } from 'three';
-declare module '@react-three/fiber' {
-    interface ThreeElements {
-        simpleCharacterImpl: ThreeElement<typeof SimpleCharacterImpl>;
-    }
-}
-/**
- * provides the bvh physics world context
- */
-export declare function BvhPhysicsWorld({ children }: {
-    children?: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-/**
- * creates a simple character controller supporting running, walking, and jumping with a default avatar and animations with can be configutred
- */
-export declare const SimpleCharacter: import("react").ForwardRefExoticComponent<Omit<SimpleCharacterOptions & {
-    useViverseAvatar?: boolean;
-    children?: ReactNode;
-} & import("@react-three/fiber/dist/declarations/src/core/utils.js").Mutable<import("@react-three/fiber/dist/declarations/src/core/utils.js").Overwrite<Partial<import("@react-three/fiber/dist/declarations/src/core/utils.js").Overwrite<Group<import("three").Object3DEventMap>, import("@react-three/fiber").MathProps<Group<import("three").Object3DEventMap>> & import("@react-three/fiber").ReactProps<Group<import("three").Object3DEventMap>> & Partial<import("@react-three/fiber").EventHandlers>>>, Omit<import("@react-three/fiber").InstanceProps<Group<import("three").Object3DEventMap>, typeof Group>, "object">>>, "ref"> & import("react").RefAttributes<Group<import("three").Object3DEventMap>>>;
-/**
- * @deprecated use <BvhPhysicsBody kinematic={false} /> instead (kinematic={false} can be skipped as its the default)
- */
-export declare const FixedBvhPhysicsBody: import("react").ForwardRefExoticComponent<{
-    children?: ReactNode;
-} & import("react").RefAttributes<Object3D<import("three").Object3DEventMap>>>;
-/**
- * allows to add all children as static (non-moving) objects as sensors to the bvh physics world
- * @requires that the structure of the inner content is not changing or has a suspense boundary
- * do not wrap the content inside in a suspense!
- */
-export declare const BvhPhysicsSensor: import("react").ForwardRefExoticComponent<{
-    children?: ReactNode;
-    isStatic?: boolean;
-    onIntersectedChanged?: (intersected: boolean) => void;
-} & import("react").RefAttributes<Object3D<import("three").Object3DEventMap>>>;
-/**
- * allows to add all children as static (non-moving) or kinematic (moving) objects as obstacles to the bvh physics world
- * @requires that the structure of the inner content is not changing or has a suspense boundary
- * do not wrap the content inside in a suspense!
- */
-export declare const BvhPhysicsBody: import("react").ForwardRefExoticComponent<{
-    children?: ReactNode;
-    kinematic?: boolean;
-} & import("react").RefAttributes<Object3D<import("three").Object3DEventMap>>>;
-export declare function CharacterModelBone({ bone, children }: {
-    bone: VRMHumanBoneName;
-    children?: ReactNode;
-}): import("react/jsx-runtime").JSX.Element | null;

package/dist/character.js

@@ -1,167 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { VRM } from '@pixiv/three-vrm';
-import { BvhPhysicsWorld as BvhPhysicsWorldImpl, SimpleCharacter as SimpleCharacterImpl, preloadSimpleCharacterAssets, simpleCharacterAnimationNames, InputSystem, LocomotionKeyboardInput, PointerCaptureInput, ScreenJoystickInput, ScreenJumpButtonInput, extractProxy, } from '@pmndrs/viverse';
-import { useFrame, useThree, extend, createPortal, useStore } from '@react-three/fiber';
-import { createContext, forwardRef, Fragment, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
-import { clear, suspend } from 'suspend-react';
-import { create } from 'zustand';
-import { useViverseActiveAvatar } from './index.js';
-const BvhPhyiscsWorldContext = createContext(undefined);
-extend({ SimpleCharacterImpl });
-const CharacterModelStoreContext = createContext(undefined);
-/**
- * provides the bvh physics world context
- */
-export function BvhPhysicsWorld({ children }) {
-    const world = useMemo(() => new BvhPhysicsWorldImpl(), []);
-    return _jsx(BvhPhyiscsWorldContext.Provider, { value: world, children: children });
-}
-const PreloadSimpleCharacterAssetsSymbol = Symbol('preload-simple-character-assets');
-/**
- * creates a simple character controller supporting running, walking, and jumping with a default avatar and animations with can be configutred
- */
-export const SimpleCharacter = forwardRef(({ children, useViverseAvatar = true, input, movement, model, physics, cameraBehavior, animation, inputOptions, ...groupProps }, ref) => {
-    const avatar = useViverseActiveAvatar();
-    const world = useContext(BvhPhyiscsWorldContext);
-    if (world == null) {
-        throw new Error('SimpleCharacter must be used within a BvhPhysicsWorld component');
-    }
-    const domElement = useThree((s) => s.gl.domElement);
-    const newOptions = {
-        inputOptions,
-        movement,
-        physics,
-        cameraBehavior,
-        animation,
-        model: model != false && avatar != null && useViverseAvatar
-            ? {
-                type: avatar.vrmUrl != null ? 'vrm' : undefined,
-                url: avatar?.vrmUrl,
-                ...(model === true ? undefined : model),
-            }
-            : model,
-    };
-    const preloadSimpleCharacterAssetsKeys = [
-        JSON.stringify(newOptions.model),
-        ...simpleCharacterAnimationNames.map((name) => JSON.stringify(newOptions.animation?.[name])),
-    ];
-    suspend(async () => {
-        const result = await preloadSimpleCharacterAssets(newOptions);
-        result.model?.scene.addEventListener('dispose', () => clear([PreloadSimpleCharacterAssetsSymbol, ...preloadSimpleCharacterAssetsKeys]));
-        return result;
-    }, [PreloadSimpleCharacterAssetsSymbol, ...preloadSimpleCharacterAssetsKeys]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const currentOptions = useMemo(() => ({}), preloadSimpleCharacterAssetsKeys);
-    Object.assign(currentOptions, newOptions);
-    const internalRef = useRef(null);
-    const store = useMemo(() => create(() => ({ model: undefined })), []);
-    useEffect(() => {
-        if (internalRef.current == null) {
-            return;
-        }
-        internalRef.current.inputSystem.dispose();
-        if (input == null || 'length' in input) {
-            internalRef.current.inputSystem = new InputSystem(domElement, input ?? [ScreenJoystickInput, ScreenJumpButtonInput, PointerCaptureInput, LocomotionKeyboardInput], extractProxy(currentOptions, 'inputOptions'));
-            return;
-        }
-        internalRef.current.inputSystem = input;
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    Array.isArray(input) ? [...input, domElement] : [input, domElement]);
-    useEffect(() => {
-        const simpleCharacter = internalRef.current;
-        if (simpleCharacter == null) {
-            return;
-        }
-        simpleCharacter.addEventListener('loaded', () => {
-            store.setState({ model: simpleCharacter.model });
-        });
-        if (simpleCharacter.model != null) {
-            store.setState({ model: simpleCharacter.model });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [world, domElement, currentOptions]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useImperativeHandle(ref, () => internalRef.current, [world, domElement, currentOptions]);
-    useFrame((_, delta) => internalRef.current?.update(delta));
-    const r3fStore = useStore();
-    const getCamera = useCallback(() => r3fStore.getState().camera, [r3fStore]);
-    return (_jsx("simpleCharacterImpl", { ...groupProps, args: [getCamera, world, domElement, currentOptions], ref: internalRef, children: _jsx(CharacterModelStoreContext.Provider, { value: store, children: children }) }));
-});
-/**
- * @deprecated use <BvhPhysicsBody kinematic={false} /> instead (kinematic={false} can be skipped as its the default)
- */
-export const FixedBvhPhysicsBody = forwardRef(({ children }, ref) => {
-    return _jsxs(BvhPhysicsBody, { children: [" ", children] });
-});
-/**
- * allows to add all children as static (non-moving) objects as sensors to the bvh physics world
- * @requires that the structure of the inner content is not changing or has a suspense boundary
- * do not wrap the content inside in a suspense!
- */
-export const BvhPhysicsSensor = forwardRef(({ children, isStatic = true, onIntersectedChanged }, ref) => {
-    const world = useContext(BvhPhyiscsWorldContext);
-    if (world == null) {
-        throw new Error('BvhPhysicsSensor must be used within a BvhPhysicsWorld component');
-    }
-    const internalRef = useRef(null);
-    const listenerRef = useRef(onIntersectedChanged);
-    listenerRef.current = onIntersectedChanged;
-    useEffect(() => {
-        const body = internalRef.current;
-        if (body == null) {
-            return;
-        }
-        world.addSensor(body, isStatic, (intersected) => listenerRef.current?.(intersected));
-        return () => world.removeSensor(body);
-    }, [world, isStatic]);
-    useImperativeHandle(ref, () => internalRef.current, []);
-    return _jsx("group", { ref: internalRef, children: children });
-});
-/**
- * allows to add all children as static (non-moving) or kinematic (moving) objects as obstacles to the bvh physics world
- * @requires that the structure of the inner content is not changing or has a suspense boundary
- * do not wrap the content inside in a suspense!
- */
-export const BvhPhysicsBody = forwardRef(({ children, kinematic = false }, ref) => {
-    const world = useContext(BvhPhyiscsWorldContext);
-    if (world == null) {
-        throw new Error('FixedPhysicsBody must be used within a BvhPhysicsWorld component');
-    }
-    const internalRef = useRef(null);
-    useEffect(() => {
-        const body = internalRef.current;
-        if (body == null) {
-            return;
-        }
-        world.addBody(body, kinematic);
-        return () => world.removeBody(body);
-    }, [world, kinematic]);
-    useImperativeHandle(ref, () => internalRef.current, []);
-    return _jsx("group", { ref: internalRef, children: children });
-});
-export function CharacterModelBone({ bone, children }) {
-    const [state, setState] = useState(undefined);
-    const store = useContext(CharacterModelStoreContext);
-    useEffect(() => {
-        if (store == null) {
-            return;
-        }
-        const updateContainer = ({ model }) => {
-            if (model == null) {
-                return;
-            }
-            const boneObject = model instanceof VRM ? model.humanoid.getRawBoneNode(bone) : model.scene.getObjectByName(bone);
-            if (boneObject == null) {
-                return;
-            }
-            setState({ boneObject: boneObject, boneRotationOffset: model.boneRotationOffset });
-        };
-        updateContainer(store.getState());
-        return store.subscribe(updateContainer);
-    }, [bone, store]);
-    if (state == null) {
-        return null;
-    }
-    return (_jsx(Fragment, { children: createPortal(_jsx("group", { quaternion: state.boneRotationOffset, children: children }), state.boneObject) }, state.boneObject.id));
-}