<Gltf/>

<Gltf/> コンポーネントは GLB シーンをロードしてインスタンス化し、React からその階層を操作できるようにします。デフォルトでモデルをレンダリングし、ファイル内のすべての Entity のキャッシュを構築し、<Modify.*> ルールを調整することでインポートされたコンテンツを宣言的に変更できます。

全体像については GLB モデルの変更ガイド を参照してください。

使い方

useModel で GLB をロードし、<Gltf/> に Asset を渡します。コンポーネントがインスタンス化を処理します:

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>
  );
}

ライブ例

このデモでは、モデルのレンダースタイルを変更するコントロールを追加しています。Render Component を持つすべてのノードをターゲットにし、レンダースタイルをリアクティブに変更します。

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>
  );
};

データのみのインスタンス化

シーン階層だけが必要な場合（例えばコライダーの生成やクエリの実行時など）は render={false} を設定します。少なくとも 1 つの <Modify.Node> 子を含んでいれば、<Gltf/> は引き続き GLB をインスタンス化します。

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

プロパティ

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	-