<Gltf/>

The <Gltf/> component loads and instantiates a GLB scene so you can work with its hierarchy from React. It renders the model by default, builds a cache of every entity in the file, and coordinates <Modify.*> rules so you can declaratively adjust the imported content.

Learn the bigger picture in the Modifying GLB Models guide.

Usage

Load a GLB with useModel and pass the asset into <Gltf/>. The component handles instantiation for you:

import { useModel } from '@playcanvas/react/hooks';
import { Entity, Gltf } from '@playcanvas/react';

export function Statue() {
  const { asset } = useModel('/assets/statue.glb');
  if (!asset) return null;

  return (
    <Entity name="Statue">
      <Gltf asset={asset} key={asset.id} />
    </Entity>
  );
}

Live example

This demo adds a control to change the render style of the model. It targets all nodes with a render component and changes the render style reactively.

Demo

Control GLB rendering and render components - View Code

Code

gltf-modify-example.jsx

// ↑ imports hidden

export const GltfModifyExample = () => {
  const { asset } = useModel('/assets/statue.glb');
  const { renderStyle } = useControls()

  if (!asset) return null;

  return (
    <Gltf asset={asset} >
      <Modify.Node path="**[render]" >
        <Modify.Render renderStyle={renderStyle} />
      </Modify.Node>
    </Gltf>
  );
};

Data-only instantiation

Set render={false} when you only need the scene hierarchy—for example when generating colliders or running queries. <Gltf/> still instantiates the GLB as long as you include at least one <Modify.Node> child.

<Gltf asset={asset} key={asset.id} render={false}>
  <Modify.Node path="**">
    <Collision type="mesh" />
  </Modify.Node>
</Gltf>

Properties

Name	Type	Default
asset	Asset The GLTF asset loaded via useModel	-
render?	boolean Whether to render the GLTF scene visuals	true
children?	ReactNode Children should contain <Modify.Node> components	-