1.2.0 中的预制件实例化

1.2.0 中的预制件实例化

David Peicho

预制件实例化是从 .bin/.glb 文件创建对象和组件的过程。

由于新的实例化方法基于多场景的概念，我们建议您首先快速浏览我们的 多场景博客文章。

1.2.0 之前 

通过（现已弃用的）append 方法可以实例化“预制件”：

const promises = [];
for (let i = 0; i < 100; ++i) {
    promises.push(await engine.scene.append('Zombie.bin'));
}
await Promise.all(promises);

此 API 存在以下限制：

  • 场景需要下载和解析 100 次
  • 每个 Zombie.bin 创建新的 网格、纹理 和 材质

让我们看看 Wonderland Engine 1.2.0 如何帮助解决这些问题！

实例化 

任何通过 loadScene 加载的场景都可以作为实例化的接收者：

const mainScene = await engine.loadMainScene('Scene.bin');
const zombie = await engine.loadPrefab('Zombie.bin');

// 创建一群僵尸
for (let i = 0; i < 100; ++i) {
    const {root} = mainScene.instantiate(zombie);
}

由于结果是一个 Object3D 实例，您可以按照以下方式修改层次结构：

const {root} = mainScene.instantiate(zombie);
// `root` 是整个 `Zombie.bin` 场景图的 Object3D 父节点
root.setScalingLocal([0.5, 0.5, 0.5]);

您可以在 活动 和 非活动 场景上调用 instantiate()。虽然上面的示例展示了如何在活动场景中使用它，但在非活动场景中的实例化方式相同：

const zombie = await engine.loadPrefab('Zombie.bin');
const zombieHead = zombie.findByName('Head')[0];
zombieHead.addComponent(LookAtComponent);

const nextScene = engine.load('NextScene.bin');

// 仅在实例化后，LookAtComponent.onActivate()
// 和 LookAtComponent.start() 才会被调用。
nextScene.instantiate(zombie);

GLTF 

实例化不限于 Wonderland Engine 场景格式 (.bin)，也可用于 glTF 文件：

const avocado = await engine.loadGLTF('Avocado.glb');

// 制作一个牛油果沙拉
for (let i = 0; i < 100; ++i) {
    const {root} = scene.instantiate(avocado);
}

GlTF 预制件还具备用于管理扩展的额外方法。有关详细信息，请查看 PrefabGLTF API。

关于资源的说明 

如在 多场景博客文章 中提到的，资源在加载时被移入 engine 实例中。这允许多个场景引用相同的资源，而不会重复占用内存。

通过 实例化 创建的组件因此：

  • 引用相同的资源
  • 删除资源将导致实例引用一个空条目

进一步学习 

以下是一些链接，帮助您在项目中开始使用实例化：

我们迫不及待地想看到社区如何利用实例化来构建出色的体验！

Last Update: May 19, 2024

保持更新。