react-native-filament/lib/module/react/ModelInstance.js

A real-time physically based 3D rendering engine for React Native

"use strict";

import React from 'react';
import { useMemo } from 'react';
import { ParentInstancesContext, useParentInstancesContext } from './ParentInstancesContext';
import { useApplyTransformations } from '../hooks/internal/useApplyTransformations';
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * You can render multiple instances of the same model. If you use a model multiple times this is recommended,
 * as it will only be loaded once into memory.
 * This component helps with applying configs to a specific instance of a model.
 *
 * @example
 * ```tsx
 * <Model source={require('model.glb')} instanceCount={2}>
 *   <ModelInstance index={0} scale={[1, 1, 1]} />
 *   <ModelInstance index={1} scale={[2, 2, 2]} />
 * </Model>
 * ```
 *
 */
export function ModelInstance({
  index,
  ...restProps
}) {
  const instances = useParentInstancesContext();
  const instance = instances[index];
  if (instance == null) {
    throw new Error(`The parent Model component has ${instances.length} instances. You tried to use index ${index}`);
  }
  return /*#__PURE__*/_jsx(ModelInstanceImpl, {
    instance: instance,
    ...restProps
  });
}
function ModelInstanceImpl({
  instance,
  children,
  ...transformProps
}) {
  const rootEntity = useMemo(() => {
    return instance.getRoot();
  }, [instance]);
  const boundingBox = useMemo(() => {
    return instance.getBoundingBox();
  }, [instance]);
  const instances = useMemo(() => [instance], [instance]);
  useApplyTransformations({
    transformProps,
    to: rootEntity,
    aabb: boundingBox
  });
  return /*#__PURE__*/_jsx(ParentInstancesContext.Provider, {
    value: instances,
    children: children
  });
}
//# sourceMappingURL=ModelInstance.js.map