@react-three/xr/dist/hand.js

VR/AR for react-three-fiber

import { jsx as _jsx } from "react/jsx-runtime";
import { cloneXRHandGltf, configureXRHandModel, createUpdateXRHandVisuals, } from '@pmndrs/xr/internals';
import { useFrame, useLoader } from '@react-three/fiber';
import { forwardRef, useImperativeHandle, useMemo } from 'react';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { useXRInputSourceStateContext } from './input.js';
import { XRSpace, useXRSpace } from './space.js';
/**
 * Component for rendering a 3D model for the XRHand
 *
 * @param props
 * #### `colorWrite` - Configures color writing
 * #### `renderOrder` - Configures the render order of the model
 * @function
 */
export const XRHandModel = forwardRef((options, ref) => {
    const state = useXRInputSourceStateContext('hand');
    const gltf = useLoader(GLTFLoader, state.assetPath);
    const model = useMemo(() => cloneXRHandGltf(gltf), [gltf]);
    configureXRHandModel(model, options);
    state.object = model;
    useImperativeHandle(ref, () => model, [model]);
    const referenceSpace = useXRSpace();
    const update = useMemo(() => createUpdateXRHandVisuals(state.inputSource.hand, model, referenceSpace), [state.inputSource, model, referenceSpace]);
    useFrame((_state, _delta, frame) => update(frame));
    return _jsx("primitive", { object: model });
});
/**
 * Component for placing content in the hand anchored at a specific joint such as the index finger tip.
 *
 * @param props
 * #### `joint` - [XRHandJoint](https://developer.mozilla.org/en-US/docs/Web/API/XRHand#hand_joints) Is the name of the joint where content should be placed (e.g. `"wrist"`)
 * #### `children` - Components to be placed inside the joint (e.g. For visualizing a tooltip over the index finger tip)
 *
 * @function
 * @deprecated use `<XRSpace space="wrist">` instead of `<XRHandJoint joint="wrist">`
 */
export const XRHandJoint = forwardRef(({ joint, children }, ref) => {
    return (_jsx(XRSpace, { ref: ref, space: joint, children: children }));
});