<Gltf/>

Gltf 加载并实例化 GLB，默认渲染模型，缓存文件内全部实体，并协调 Modify 规则，使 React 可声明式调整内部结构。

完整用法见修改 GLB。

用法

通过 useModel 加载，再将资源传入 Gltf，组件自动实例化：

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 的节点，响应式改变渲染样式。

演示

控制 GLB 和渲染组件 - 查看代码

代码

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。只要至少包含一个 Modify.Node，仍会实例化层级。

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

属性

名称	类型与说明	默认值
asset	Asset<string> 通过 useModel 加载的 GLTF 资源。	-
render?	boolean 是否渲染 GLTF 场景的可视内容。	true
children?	ReactNode 子级应包含 <Modify.Node> 组件。	-