@react-three/viverse 0.1.2

package/LICENSE

@@ -0,0 +1,34 @@
+Copyright 2024 Bela Bohlender
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Link to License of robot.vrm from "FinBeenWhere?"
+https://creativecommons.org/licenses/by/4.0/
+
+License of @pixiv/three-vrm
+Copyright (c) 2019-2025 pixiv Inc.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+<h1 align="center">@react-three/viverse</h1>
+<h3 align="center">Toolkit for building and publishing React Three Fiber Apps to Viverse.</h3>
+<br/>
+
+<p align="center">
+  <a href="https://npmjs.com/package/@react-three/viverse" target="_blank">
+    <img src="https://img.shields.io/npm/v/@react-three/viverse?style=flat&colorA=000000&colorB=000000" alt="NPM" />
+  </a>
+  <a href="https://npmjs.com/package/@react-three/viverse" target="_blank">
+    <img src="https://img.shields.io/npm/dt/@react-three/viverse.svg?style=flat&colorA=000000&colorB=000000" alt="NPM" />
+  </a>
+  <a href="https://twitter.com/pmndrs" target="_blank">
+    <img src="https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000" alt="Twitter" />
+  </a>
+  <a href="https://discord.gg/ZZjjNvJ" target="_blank">
+    <img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000" alt="Discord" />
+  </a>
+</p>
+
+```bash
+npm install three @react-three/fiber @react-three/viverse
+```
+
+### What does it look like?
+
+| A prototype map with the `<SimpleCharacter/>` component and its default model. | ![render of the code below](./docs/getting-started/basic-example.gif) |
+| --------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+
+```jsx
+import { createRoot } from 'react-dom/client'
+import { Sky } from '@react-three/drei'
+import { Canvas } from '@react-three/fiber'
+import { Viverse, SimpleCharacter, FixedBvhPhysicsBody, PrototypeBox } from '@react-three/viverse'
+
+createRoot(document.getElementById('root')!).render(
+  <Canvas shadows>
+    <Viverse>
+      <Sky />
+      <directionalLight intensity={1.2} position={[5, 10, 10]} castShadow />
+      <ambientLight intensity={1} />
+      <SimpleCharacter />
+      <FixedBvhPhysicsBody>
+        <PrototypeBox scale={[10, 1, 15]} position={[0, -0.5, 0]} />
+      </FixedBvhPhysicsBody>
+    </Viverse>
+  </Canvas>,
+)
+```
+
+## How to get started
+
+> Some familiarity with
+> react, threejs, and @react-three/fiber, is recommended.
+
+Get started with **[building a simple game](https://pmndrs.github.io/viverse/tutorials/simple-game)**, take a look at our **[examples](https://pmndrs.github.io/viverse/getting-started/examples)**, or follow one of our **tutorials**:
+
+- [First person controls](https://pmndrs.github.io/viverse/tutorials/first-person)
+- [Augmented and virtual reality](https://pmndrs.github.io/viverse/tutorials/augmented-and-virtual-reality)
+- [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)
+- [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?
+
+> No Problem
+
+Check out how to build games using @pmndrs/viverse and only [vanilla three.js](https://pmndrs.github.io/viverse/without-react).

package/dist/character.d.ts

@@ -0,0 +1,34 @@
+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<SimpleCharacterOptions & {
+    useViverseAvatar?: boolean;
+    children?: ReactNode;
+} & import("react").RefAttributes<Group<import("three").Object3DEventMap>>>;
+/**
+ * allows to add all children as static (non-moving) objects to the bvh physics world
+ * @requires that the inner content is not dynamic
+ * do not wrap the content inside in a suspense!
+ */
+export declare const FixedBvhPhysicsBody: import("react").ForwardRefExoticComponent<{
+    children?: ReactNode;
+} & 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

@@ -0,0 +1,127 @@
+import { jsx as _jsx } 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 { 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, input, useViverseAvatar = true, ...options }, 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 = {
+        ...options,
+        model: options.model != false && avatar != null && useViverseAvatar
+            ? { url: avatar?.vrmUrl, ...(options.model === true ? undefined : options.model) }
+            : options.model,
+    };
+    const preloadSimpleCharacterAssetsKeys = [
+        JSON.stringify(options.model),
+        ...simpleCharacterAnimationNames.map((name) => JSON.stringify(options.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;
+        }
+        if (input == null || 'length' in input) {
+            internalRef.current.inputSystem = new InputSystem(domElement, input ?? [LocomotionKeyboardInput, PointerCaptureInput]);
+            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
+    }, [camera, world, domElement, currentOptions]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useImperativeHandle(ref, () => internalRef.current, [camera, world, domElement, currentOptions]);
+    useFrame((_, delta) => internalRef.current?.update(delta));
+    return (_jsx("simpleCharacterImpl", { args: [camera, world, domElement, currentOptions], ref: internalRef, children: _jsx(CharacterModelStoreContext.Provider, { value: store, children: children }) }));
+});
+/**
+ * allows to add all children as static (non-moving) objects to the bvh physics world
+ * @requires that the inner content is not dynamic
+ * do not wrap the content inside in a suspense!
+ */
+export const FixedBvhPhysicsBody = forwardRef(({ children }, 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.addFixedBody(body);
+        return () => world.removeFixedBody(body);
+    }, [world]);
+    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));
+}

package/dist/gamepad.d.ts

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

package/dist/gamepad.js

@@ -0,0 +1,38 @@
+import { MoveForwardField, LastTimeJumpPressedField, MoveLeftField, MoveRightField, MoveBackwardField, RunField, } from '@pmndrs/viverse';
+import { useXRControllerButtonEvent, useXRInputSourceState } from '@react-three/xr';
+import { useMemo, 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]);
+}

package/dist/index.d.ts

@@ -0,0 +1,75 @@
+import { ClientOptions, Client, checkAuthOptions } from '@viverse/sdk';
+import AvatarClient from '@viverse/sdk/avatar-client';
+import { ReactNode } from 'react';
+declare global {
+    interface ImportMeta {
+        readonly env: {
+            readonly VITE_VIVERSE_APP_ID?: string;
+        };
+    }
+}
+/**
+ * provides the BvhPhysicsWorld context and the viverse context necassary for accessing any viverse content
+ * @param props.loginRequired forces the user to login before playing
+ */
+export declare function Viverse({ children, loginRequired, checkAuth, ...options }: Partial<ClientOptions> & {
+    children?: ReactNode;
+    loginRequired?: boolean;
+    checkAuth?: checkAuthOptions;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the Viverse client instance for making API calls.
+ */
+export declare function useViverseClient(): Client;
+/**
+ * Hook to access the current authentication state.
+ */
+export declare function useViverseAuth(): {
+    access_token?: string;
+    account_id?: string;
+    expires_in?: number;
+    state?: string;
+} | undefined;
+/**
+ * Hook to access the Viverse avatar client for avatar-related operations.
+ */
+export declare function useViverseAvatarClient(): AvatarClient | undefined;
+/**
+ * Hook to fetch and access the user's Viverse profile information.
+ * Uses React Suspense for data fetching.
+ */
+export declare function useViverseProfile(): Awaited<ReturnType<AvatarClient['getProfile']>> | undefined;
+/**
+ * Hook that returns a function to initiate Viverse login flow.
+ */
+export declare function useViverseLogin(): (options?: import("@viverse/sdk").iframeLoginOptions | undefined) => void;
+/**
+ * Hook that returns a function to initiate Viverse logout flow.
+ */
+export declare function useViverseLogout(): () => void;
+/**
+ * Hook to fetch the user's personal avatar collection.
+ * Uses React Suspense for data fetching.
+ */
+export declare function useViverseAvatarList(): Awaited<ReturnType<AvatarClient['getAvatarList']>> | undefined;
+/**
+ * Hook to fetch the user's currently active/selected avatar.
+ * Uses React Suspense for data fetching.
+ */
+export declare function useViverseActiveAvatar(): Awaited<ReturnType<AvatarClient['getActiveAvatar']>> | undefined;
+/**
+ * Hook to fetch the list of publicly available avatars in Viverse.
+ * Uses React Suspense for data fetching.
+ */
+export declare function useViversePublicAvatarList(): Awaited<ReturnType<AvatarClient['getPublicAvatarList']>> | undefined;
+/**
+ * Hook to fetch a specific public avatar by its ID.
+ * 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 { FirstPersonCharacterCameraBehavior, LocomotionKeyboardInput, PointerCaptureInput, PointerLockInput, VRMHumanBoneName, } from '@pmndrs/viverse';
+export * from '@viverse/sdk';
+export * from '@viverse/sdk/avatar-client';
+export * from './gamepad.js';

package/dist/index.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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';
+// auth
+const viverseCheckAuthSymbol = Symbol('viverse-check-auth');
+const authSuspenseKeys = [];
+function clearViverseAuthCheck() {
+    for (const keys of authSuspenseKeys) {
+        clear(keys);
+    }
+    authSuspenseKeys.length = 0;
+}
+function useViverseAuthCheck(client, options) {
+    const keys = [viverseCheckAuthSymbol, client, options?.allowedOrigin];
+    return suspend(async () => {
+        authSuspenseKeys.push(keys);
+        return client?.checkAuth({ allowedOrigin: options?.allowedOrigin });
+    }, keys);
+}
+// main viverse component
+const ViverseClientContext = createContext(undefined);
+const ViverseAuthContext = createContext(undefined);
+const ViverseAvatarClientContext = createContext(undefined);
+const viverseClientSymbol = Symbol('viverse-client');
+const viverseAvatarClientSymbol = Symbol('viverse-avatar-client');
+/**
+ * provides the BvhPhysicsWorld context and the viverse context necassary for accessing any viverse content
+ * @param props.loginRequired forces the user to login before playing
+ */
+export function Viverse({ children, loginRequired = false, checkAuth, ...options }) {
+    const clientId = import.meta.env.VITE_VIVERSE_APP_ID ?? options.clientId;
+    const client = suspend(async () => clientId == null
+        ? undefined
+        : new Client({
+            domain: options.domain ?? 'account.htcvive.com',
+            authorizationParams: options.authorizationParams,
+            cookieDomain: options.cookieDomain,
+            httpTimeoutInMS: options.httpTimeoutInMS,
+            clientId,
+        }), [
+        viverseClientSymbol,
+        clientId,
+        options.authorizationParams,
+        options.cookieDomain,
+        options.domain,
+        options.httpTimeoutInMS,
+    ]);
+    const auth = useViverseAuthCheck(client);
+    if (clientId != null && auth == null && loginRequired) {
+        clearViverseAuthCheck();
+        client?.loginWithWorlds().catch(console.error);
+    }
+    const avatarClient = suspend(async () => auth?.access_token != null
+        ? new AvatarClient({ token: auth.access_token, baseURL: 'https://sdk-api.viverse.com/' })
+        : undefined, [viverseAvatarClientSymbol, auth?.access_token]);
+    if (client == null) {
+        return _jsx(BvhPhysicsWorld, { children: children });
+    }
+    return (_jsx(ViverseClientContext.Provider, { value: client, children: _jsx(ViverseAuthContext.Provider, { value: auth, children: _jsx(ViverseAvatarClientContext.Provider, { value: avatarClient, children: _jsx(BvhPhysicsWorld, { children: children }) }) }) }));
+}
+/**
+ * Hook to access the Viverse client instance for making API calls.
+ */
+export function useViverseClient() {
+    const client = useContext(ViverseClientContext);
+    if (client == null) {
+        throw new Error('Viverse client is not available in context. Did you forget to wrap your component tree with <Viverse>?');
+    }
+    return client;
+}
+/**
+ * Hook to access the current authentication state.
+ */
+export function useViverseAuth() {
+    return useContext(ViverseAuthContext);
+}
+/**
+ * Hook to access the Viverse avatar client for avatar-related operations.
+ */
+export function useViverseAvatarClient() {
+    return useContext(ViverseAvatarClientContext);
+}
+const viverseProfileSymbol = Symbol('viverse-profile');
+/**
+ * Hook to fetch and access the user's Viverse profile information.
+ * Uses React Suspense for data fetching.
+ */
+export function useViverseProfile() {
+    const avatarClient = useViverseAvatarClient();
+    return suspend(async () => avatarClient?.getProfile(), [viverseProfileSymbol, avatarClient]);
+}
+/**
+ * Hook that returns a function to initiate Viverse login flow.
+ */
+export function useViverseLogin() {
+    const client = useViverseClient();
+    return useCallback((...params) => {
+        clearViverseAuthCheck();
+        client.loginWithWorlds(...params);
+    }, [client]);
+}
+/**
+ * Hook that returns a function to initiate Viverse logout flow.
+ */
+export function useViverseLogout() {
+    const client = useViverseClient();
+    return useCallback((...params) => {
+        clearViverseAuthCheck();
+        client.logoutWithWorlds(...params);
+    }, [client]);
+}
+const viverseAvatarListSymbol = Symbol('viverse-avatar-list');
+/**
+ * Hook to fetch the user's personal avatar collection.
+ * Uses React Suspense for data fetching.
+ */
+export function useViverseAvatarList() {
+    const avatarClient = useViverseAvatarClient();
+    return suspend(async () => avatarClient?.getAvatarList(), [viverseAvatarListSymbol, avatarClient]);
+}
+const viverseActiveAvatarSymbol = Symbol('viverse-active-avatar');
+/**
+ * Hook to fetch the user's currently active/selected avatar.
+ * Uses React Suspense for data fetching.
+ */
+export function useViverseActiveAvatar() {
+    const avatarClient = useViverseAvatarClient();
+    return suspend(async () => avatarClient?.getActiveAvatar(), [viverseActiveAvatarSymbol, avatarClient]);
+}
+const viversePublicAvatarListSymbol = Symbol('viverse-public-avatar-list');
+/**
+ * Hook to fetch the list of publicly available avatars in Viverse.
+ * Uses React Suspense for data fetching.
+ */
+export function useViversePublicAvatarList() {
+    const avatarClient = useViverseAvatarClient();
+    return suspend(async () => avatarClient?.getPublicAvatarList(), [viversePublicAvatarListSymbol, avatarClient]);
+}
+const viversePublicAvatarByIDSymbol = Symbol('viverse-public-avatar-by-id');
+/**
+ * Hook to fetch a specific public avatar by its ID.
+ * Uses React Suspense for data fetching.
+ */
+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 { FirstPersonCharacterCameraBehavior, LocomotionKeyboardInput, PointerCaptureInput, PointerLockInput, VRMHumanBoneName, } from '@pmndrs/viverse';
+export * from '@viverse/sdk';
+export * from '@viverse/sdk/avatar-client';
+export * from './gamepad.js';

package/dist/material.d.ts

@@ -0,0 +1,14 @@
+import { PrototypeMaterial } from '@pmndrs/viverse';
+import { ThreeElement } from '@react-three/fiber';
+import { ColorRepresentation, Group } from 'three';
+declare module '@react-three/fiber' {
+    interface ThreeElements {
+        prototypeMaterial: ThreeElement<typeof PrototypeMaterial>;
+    }
+}
+/**
+ * component for rendering a simple placeholder prototype box using a the Prototype Material with a prototype texture from kenney.nl
+ */
+export declare const PrototypeBox: import("react").ForwardRefExoticComponent<Omit<import("@react-three/fiber/dist/declarations/src/core/utils").Mutable<import("@react-three/fiber/dist/declarations/src/core/utils").Overwrite<Partial<import("@react-three/fiber/dist/declarations/src/core/utils").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">>> & {
+    color?: ColorRepresentation;
+}, "ref"> & import("react").RefAttributes<Group<import("three").Object3DEventMap>>>;

package/dist/material.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PrototypeMaterial } from '@pmndrs/viverse';
+import { extend } from '@react-three/fiber';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { PlaneGeometry } from 'three';
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+extend({ PrototypeMaterial });
+const plane1 = new PlaneGeometry();
+plane1.translate(0, 0, 0.5);
+const plane2 = new PlaneGeometry();
+plane2.rotateY(Math.PI);
+plane2.translate(0, 0, -0.5);
+const twoPlanes = mergeGeometries([plane1, plane2]);
+/**
+ * component for rendering a simple placeholder prototype box using a the Prototype Material with a prototype texture from kenney.nl
+ */
+export const PrototypeBox = forwardRef((props, ref) => {
+    const internalRef = useRef(null);
+    const mat1Ref = useRef(null);
+    const mat2Ref = useRef(null);
+    const mat3Ref = useRef(null);
+    useEffect(() => {
+        if (mat1Ref.current == null ||
+            mat2Ref.current == null ||
+            mat3Ref.current == null ||
+            internalRef.current == null) {
+            return;
+        }
+        const scaleX = Math.max(0.5, Math.round(internalRef.current.scale.x) / 2);
+        const scaleY = Math.max(0.5, Math.round(internalRef.current.scale.y) / 2);
+        const scaleZ = Math.max(0.5, Math.round(internalRef.current.scale.z) / 2);
+        mat1Ref.current.repeat.set(scaleX, scaleZ);
+        mat2Ref.current.repeat.set(scaleZ, scaleY);
+        mat3Ref.current.repeat.set(scaleX, scaleY);
+    });
+    useImperativeHandle(ref, () => internalRef.current, []);
+    return (_jsxs("group", { ...props, ref: internalRef, children: [_jsx("mesh", { "rotation-x": Math.PI / 2, geometry: twoPlanes, castShadow: true, receiveShadow: true, children: _jsx("prototypeMaterial", { ref: mat1Ref, color: props.color }) }), _jsx("mesh", { "rotation-y": Math.PI / 2, geometry: twoPlanes, castShadow: true, receiveShadow: true, children: _jsx("prototypeMaterial", { ref: mat2Ref, color: props.color }) }), _jsx("mesh", { geometry: twoPlanes, castShadow: true, receiveShadow: true, children: _jsx("prototypeMaterial", { ref: mat3Ref, color: props.color }) })] }));
+});

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@react-three/viverse",
+  "description": "Toolkit for building and publishing React Three Fiber Apps to Viverse.",
+  "type": "module",
+  "main": "dist/index.js",
+  "author": "Bela Bohlender",
+  "license": "SEE LICENSE IN LICENSE",
+  "homepage": "https://github.com/pmndrs/viverse",
+  "keywords": [
+    "r3f",
+    "viverse",
+    "character controller",
+    "three.js",
+    "react",
+    "typescript",
+    "web game"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:pmndrs/viverse.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@viverse/sdk": "^1.2.10-alpha.0",
+    "suspend-react": "^0.1.3",
+    "@react-three/xr": "^6.6.20",
+    "@pixiv/three-vrm": "^3.4.2",
+    "zustand": "^5.0.6",
+    "@pmndrs/viverse": "^0.1.2"
+  },
+  "peerDependencies": {
+    "@react-three/fiber": "*"
+  },
+  "devDependencies": {
+    "@react-three/fiber": "^9.2.0",
+    "@types/react": "^19.1.8",
+    "react": "^19.1.0"
+  },
+  "version": "0.1.2",
+  "scripts": {
+    "build": "tsc",
+    "check:prettier": "prettier --check src",
+    "check:eslint": "eslint \"src/**/*.{ts,tsx}\"",
+    "fix:prettier": "prettier --write src",
+    "fix:eslint": "eslint \"src/**/*.{ts,tsx}\" --fix"
+  }
+}