1.2.0 中的预制件实例化

1.2.0 中的预制件实例化

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

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

1.2.0 之前 

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

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

此 API 存在以下限制：

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

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

实例化 

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

1const mainScene = await engine.loadMainScene('Scene.bin');
2const zombie = await engine.loadPrefab('Zombie.bin');
3
4// 创建一群僵尸
5for (let i = 0; i < 100; ++i) {
6    const {root} = mainScene.instantiate(zombie);
7}

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

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

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

1const zombie = await engine.loadPrefab('Zombie.bin');
2const zombieHead = zombie.findByName('Head')[0];
3zombieHead.addComponent(LookAtComponent);
4
5const nextScene = engine.load('NextScene.bin');
6
7// 仅在实例化后，LookAtComponent.onActivate()
8// 和 LookAtComponent.start() 才会被调用。
9nextScene.instantiate(zombie);

GLTF 

实例化不仅限于 Wonderland Engine 场景格式（.bin），还可用于 glTF：

1const avocado = await engine.loadGLTF('Avocado.glb');
2
3// 制作一个牛油果沙拉
4for (let i = 0; i < 100; ++i) {
5    const {root} = scene.instantiate(avocado);
6}

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

关于资源的注意事项 

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

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

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

进一步学习 

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

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

Last Update: May 19, 2024

保持更新。