@react-three/viverse 0.1.16 → 0.1.18

package/README.md

@@ -17,6 +17,8 @@
   </a>
 </p>
 
+> Build character-based XR, Desktop, or Mobile web games, the easy way.
+
 ```bash
 npm install three @react-three/fiber @react-three/viverse
 ```

package/dist/character.js

@@ -1,8 +1,8 @@
 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, } from '@pmndrs/viverse';
-import { useFrame, useThree, extend, createPortal } from '@react-three/fiber';
-import { createContext, forwardRef, Fragment, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+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';
@@ -20,15 +20,15 @@ const PreloadSimpleCharacterAssetsSymbol = Symbol('preload-simple-character-asse
 /**
  * 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, ...groupProps }, ref) => {
+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 camera = useThree((s) => s.camera);
     const domElement = useThree((s) => s.gl.domElement);
     const newOptions = {
+        inputOptions,
         movement,
         physics,
         cameraBehavior,
@@ -59,8 +59,9 @@ export const SimpleCharacter = forwardRef(({ children, useViverseAvatar = true,
         if (internalRef.current == null) {
             return;
         }
+        internalRef.current.inputSystem.dispose();
         if (input == null || 'length' in input) {
-            internalRef.current.inputSystem = new InputSystem(domElement, input ?? [LocomotionKeyboardInput, PointerCaptureInput]);
+            internalRef.current.inputSystem = new InputSystem(domElement, input ?? [ScreenJoystickInput, ScreenJumpButtonInput, PointerCaptureInput, LocomotionKeyboardInput], extractProxy(currentOptions, 'inputOptions'));
             return;
         }
         internalRef.current.inputSystem = input;
@@ -79,11 +80,13 @@ export const SimpleCharacter = forwardRef(({ children, useViverseAvatar = true,
             store.setState({ model: simpleCharacter.model });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [camera, world, domElement, currentOptions]);
+    }, [world, domElement, currentOptions]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useImperativeHandle(ref, () => internalRef.current, [camera, world, domElement, currentOptions]);
+    useImperativeHandle(ref, () => internalRef.current, [world, domElement, currentOptions]);
     useFrame((_, delta) => internalRef.current?.update(delta));
-    return (_jsx("simpleCharacterImpl", { ...groupProps, args: [camera, world, domElement, currentOptions], ref: internalRef, children: _jsx(CharacterModelStoreContext.Provider, { value: store, children: children }) }));
+    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)

package/dist/index.d.ts

@@ -69,7 +69,8 @@ export declare function useViversePublicAvatarList(): Awaited<ReturnType<AvatarC
 export declare function useViversePublicAvatarByID(id: string): Awaited<ReturnType<AvatarClient['getPublicAvatarByID']>> | undefined;
 export * from './character.js';
 export * from './material.js';
-export { FirstPersonCharacterCameraBehavior, SimpleCharacter as SimpleCharacterImpl, LocomotionKeyboardInput, PointerCaptureInput, PointerLockInput, VRMHumanBoneName, } from '@pmndrs/viverse';
+export { FirstPersonCharacterCameraBehavior, SimpleCharacter as SimpleCharacterImpl, LocomotionKeyboardInput, PointerCaptureInput, PointerLockInput, type InputField, InputSystem, type LocomotionKeyboardInputOptions, type PointerLockInputOptions, type PointerCaptureInputOptions, ScreenJoystickInput, type ScreenJoystickInputOptions, type SimpleCharacterInputOptions, ScreenJumpButtonInput, VRMHumanBoneName, } from '@pmndrs/viverse';
 export * from '@viverse/sdk';
 export * from '@viverse/sdk/avatar-client';
 export * from './gamepad.js';
+export * from './mobile.js';

package/dist/index.js

@@ -154,7 +154,8 @@ export function useViversePublicAvatarByID(id) {
 }
 export * from './character.js';
 export * from './material.js';
-export { FirstPersonCharacterCameraBehavior, SimpleCharacter as SimpleCharacterImpl, LocomotionKeyboardInput, PointerCaptureInput, PointerLockInput, VRMHumanBoneName, } from '@pmndrs/viverse';
+export { FirstPersonCharacterCameraBehavior, SimpleCharacter as SimpleCharacterImpl, LocomotionKeyboardInput, PointerCaptureInput, PointerLockInput, InputSystem, ScreenJoystickInput, ScreenJumpButtonInput, VRMHumanBoneName, } from '@pmndrs/viverse';
 export * from '@viverse/sdk';
 export * from '@viverse/sdk/avatar-client';
 export * from './gamepad.js';
+export * from './mobile.js';

package/dist/mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/dist/mobile.js

@@ -0,0 +1,15 @@
+import { getIsMobileMediaQuery } from '@pmndrs/viverse';
+import { useSyncExternalStore } from 'react';
+export function useIsMobile() {
+    const subscribe = (onStoreChange) => {
+        const mediaQuery = getIsMobileMediaQuery();
+        if (mediaQuery == null)
+            return () => { };
+        const handler = () => onStoreChange();
+        mediaQuery.addEventListener('change', handler);
+        return () => mediaQuery.removeEventListener('change', handler);
+    };
+    const getSnapshot = () => getIsMobileMediaQuery()?.matches ?? false;
+    const getServerSnapshot = () => false;
+    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/package.json

@@ -28,7 +28,7 @@
     "@pixiv/three-vrm": "^3.4.2",
     "zustand": "^5.0.6",
     "@react-three/xr": "^6.6.20",
-    "@pmndrs/viverse": "^0.1.16"
+    "@pmndrs/viverse": "^0.1.18"
   },
   "peerDependencies": {
     "@react-three/fiber": "*"
@@ -39,7 +39,7 @@
     "@types/react": "^19.1.8",
     "react": "^19.1.0"
   },
-  "version": "0.1.16",
+  "version": "0.1.18",
   "scripts": {
     "build": "tsc",
     "check:prettier": "prettier --check src",