useAsset

If you want to go beyond simply embedding a model, we can turn to our hooks.

The following is equivalent to embedding an asset model:

function MyModel() {
  useAsset({ id: 'uuid', refkey: 'my-model' });
  return <Asset refkey="my-model" />;
}

We introduce a new concept here, the refkey. This is any string that can be used to uniquely identify the asset in question, across our hierarchy. Once the asset has been initialized, we can refer to that asset from other hooks via that refkey. See useConfigurator for an example of that.

usAsset

const [state, setState] = useAsset({
  id: 'uuid',
  refkey: 'my-model',
  configuration: {},
});

<Asset refkey="my-model" />;

The refkey there is:

• used to identify that a model is interactive
• used as the key to access that model from elsewhere (useConfigurator)

This hook gives the ability to modify the asset via custom scripting (outside of the configurator).

Example

function MyAsset() {
  const [assetState, setState] = useAsset({
    refkey: 'demo-model',
    id: modelId,
  });

  useEffect(() => {
    const boxId = 'cb7fc54a-abee-43e3-9bb1-4688fbdb7843';
    const path = [boxId, 'Transform', 'scale'];
    // modify the asset
    const newAssetState = api.scene.set(assetState, path, { x: 5, y: 5, z: 1 });
    // update with the new state
    setState(newAssetState);
  }, []);

  return <Asset refkey="demo-model" />;
}