如何判断引擎中Entity实体的GLTFShape资源已完全加载？

你不需要靠固定时长盲目等待，现有引擎API已经能精准拿到资源加载完成的状态，对应你期望的三种写法都可以实现：

• 首先修正你原有代码的问题：new GLTFShape()必须传入模型资源路径，否则不会触发任何资源加载逻辑。
• GLTFShape实例自带原生的loaded属性，是一个和资源加载状态完全绑定的Promise，加载成功时会resolve，加载失败时会reject，状态完全由引擎维护，不存在时机偏差。

1. 模型加载完成回调写法 #

直接调用loaded.then()传入回调即可，和你期望的OnLoaded逻辑完全一致：

const box = new Entity()
box.getComponent(Transform).position.set(3, 1, 3)
// 替换成你自己的模型路径
const model = new GLTFShape('models/box.glb')
box.addComponent(model)

// 注册加载完成回调
model.loaded.then(() => {
  // 此处模型已经完全加载到缓存，可以正常渲染、交互
  console.log('模型加载完成')
}).catch(err => {
  // 可选：捕获加载失败的异常
  console.error('模型加载失败', err)
})

engine.addEntity(box)

2. await异步等待写法 #

因为loaded本身就是Promise，直接在async函数里await即可，不需要改造engine原生方法：

async function spawnLoadedEntity() {
  const box = new Entity()
  box.getComponent(Transform).position.set(3, 1, 3)
  const model = new GLTFShape('models/box.glb')
  box.addComponent(model)
  engine.addEntity(box)

  // 等待模型加载完成
  await model.loaded
  // 此处写加载完成后的业务逻辑
}

spawnLoadedEntity()

3. addEntity传入回调的写法 #

可以自己封装一层工具方法实现你要的调用形式，兼容带GLTF资源的实体和普通无外部资源的实体：

/**
 * 添加实体并在资源加载完成后触发回调
 * @param entity 要添加的实体实例
 * @param onLoaded 加载完成回调
 */
function addEntity(entity: Entity, onLoaded?: () => void) {
  engine.addEntity(entity)
  if (!onLoaded) return

  const gltfComp = entity.getComponentOrNull(GLTFShape)
  if (gltfComp) {
    // 有GLTF资源的实体等模型加载完再触发回调
    gltfComp.loaded.then(onLoaded).catch(() => {})
    return
  }
  // 无外部资源的普通实体，添加后直接触发回调
  onLoaded()
}

// 调用方式和你预期完全一致
addEntity(box, () => {
  console.log('实体及挂载资源全部加载完成')
})

注意：不要使用固定时长的setTimeout做等待，不同用户的网络、设备性能差异极大，固定等待时长要么会提前触发逻辑导致报错，要么会造成不必要的等待延迟，基于原生loaded状态的判断是100%和引擎实际加载进度对齐的，没有误判风险。

内容的提问来源于stack exchange，提问作者Raidel Ross