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

VR/AR for react-three-fiber

import { jsx as _jsx } from "react/jsx-runtime";
import { makeTeleportTarget, TeleportPointerRayModel as TeleportPointerRayModelImpl, } from '@pmndrs/xr';
import { useFrame, useStore } from '@react-three/fiber';
import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
/**
 * Component that allows to declare its children as teleport targets.
 * @param props
 * @param props.onTeleport Function that is called when the teleport target is hit
 */
export function TeleportTarget({ children, onTeleport, }) {
    const ref = useRef(null);
    const teleportRef = useRef(onTeleport);
    teleportRef.current = onTeleport;
    const store = useStore();
    useEffect(() => {
        if (ref.current == null) {
            return;
        }
        return makeTeleportTarget(ref.current, () => store.getState().camera, (point, event) => teleportRef.current?.(point, event));
    }, [store]);
    return (_jsx("group", { pointerEventsType: { allow: 'teleport' }, ref: ref, children: children }));
}
export const TeleportPointerRayModel = forwardRef(({ pointer, linePoints, ...options }, ref) => {
    const mesh = useMemo(() => new TeleportPointerRayModelImpl(linePoints), [linePoints]);
    useImperativeHandle(ref, () => mesh, [mesh]);
    mesh.options = options;
    useFrame(() => mesh.update(pointer));
    return _jsx("primitive", { object: mesh });
});