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

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

import React, { useEffect, useMemo } from 'react';
import { useModel } from '../hooks/useModel';
import { ParentModelAssetContext } from './ParentModelAssetContex';
import { ParentEntityContext } from './ParentEntityContex';
import { getAssetFromModel } from '../utilities/getAssetFromModel';
import { useFilamentContext } from './Context';
/**
 * Loads a model from the given source.
 *
 *
 * If you are passing in a `.glb` model or similar from your app's bundle using `require(..)`, make sure to add `glb` as an asset extension to `metro.config.js`!
 * If you are passing in a `{ url: ... }`, make sure the URL points directly to a `.glb` model. This can either be a web URL (`http://..`/`https://..`), a local file (`file://..`), or an native asset path (`path/to/asset.glb`)
 */
export function Model({
  children,
  source,
  transformToUnitCube,
  ...modelProps
}) {
  const model = useModel(source, modelProps);
  const asset = getAssetFromModel(model);
  const rootEntity = useMemo(() => {
    if (asset === undefined) {
      return null;
    }
    return asset.getRoot();
  }, [asset]);
  const {
    transformManager
  } = useFilamentContext();
  useEffect(() => {
    if (asset == null) return;
    if (transformToUnitCube) {
      transformManager.transformToUnitCube(asset);
    }
  }, [transformManager, asset, transformToUnitCube]);
  if (asset == null || rootEntity == null) {
    return null;
  }
  return /*#__PURE__*/React.createElement(ParentModelAssetContext.Provider, {
    value: asset
  }, /*#__PURE__*/React.createElement(ParentEntityContext.Provider, {
    value: rootEntity
  }, children));
}
//# sourceMappingURL=Model.js.map