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

VR/AR for react-three-fiber

import { jsx as _jsx } from "react/jsx-runtime";
import { updateXRPlaneGeometry } from '@pmndrs/xr/internals';
import { useFrame } from '@react-three/fiber';
import { forwardRef, useEffect, useMemo, useState } from 'react';
import { useXR } from './xr.js';
/**
 * Component for rendering a mesh for the XRPlane based on the detected plane geometry
 *
 * @param props
 * Accepts the same props as a ThreeJs [Mesh](https://threejs.org/docs/#api/en/objects/Mesh)
 * @function
 */
export const XRPlaneModel = forwardRef(({ plane, ...rest }, ref) => {
    const geometry = useXRPlaneGeometry(plane);
    return _jsx("mesh", { ref: ref, geometry: geometry, ...rest });
});
/**
 * Hook for getting all dected planes with the provided semantic label
 */
export function useXRPlanes(semanticLabel) {
    const planes = useXR((xr) => xr.detectedPlanes);
    return useMemo(() => (semanticLabel == null ? planes : planes.filter((plane) => plane.semanticLabel === semanticLabel)), [planes, semanticLabel]);
}
/**
 * Hook for getting the geometry from the detected plane
 *
 * @param plane the detected plane
 * @param disposeBuffer allows to disable auto disposing the geometry buffer
 */
export function useXRPlaneGeometry(plane, disposeBuffer = true) {
    const [geometry, setGeometry] = useState(updateXRPlaneGeometry(plane, undefined));
    useFrame(() => setGeometry((geometry) => updateXRPlaneGeometry(plane, geometry)));
    useEffect(() => {
        if (!disposeBuffer) {
            return;
        }
        return () => geometry.dispose();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [geometry]);
    return geometry;
}