有没有办法让我在 .glb 的 a 场景组件中渲染 3D 模型？

Question

我有一个 .glb 文件，其中包含穿着西装的人的 3D 模型。

我想在我的场景中展示这个模型。

我使用以下代码来尝试此操作：

在 MyComponent.tsx 中，我返回以下 JSX

<a-scene embedded>
        <a-assets>
          <a-asset-item id="businessMan1" src="BusinessMan.glb"></a-asset-item>
        </a-assets>

        <a-gltf-model
          gltf-model="#businessMan1"
          position="0 0 0"
        ></a-gltf-model>
</a-scene>

我的文件夹结构是

• 源代码
  • 组件
    • 商人.glb
    • MyComponent.tsx

在控制台中我看到找不到该模型

core:propertyTypes:warn "#businessMan1" asset not found. 

在 a 框架检查器工具中我可以看到实体（但缺少 3D 模型）

请在此处查看我的 A 框架检查器工具视图的图片

我已经搜索了很多小时，并尝试在与我类似的其他问题中找到解决方案，但是我似乎无法确切地弄清楚为什么当我的语法遵循文档时我看不到我的 3D 模型。

我尝试过使用 a-entity，经过研究发现也许我应该尝试使用 a-gltf-model，但是无论我做什么，我似乎都遇到了困难。

我还发现其中许多问题/答案都是 7 年前提出的。 a-frame lib 是否已完全弃用，或者有人可以向我展示一个在 2024 年渲染 a-scene 中存储在 .gltf 中的 3D 模型的简单示例吗？

我很乐意使用一些在线免费资源来获取存储为 .gltf/.glb 的酷炫 3D 模型。文档表明它们是可以互换的，但尽管遵循文档，我仍无法获得一个简单的示例！

我能够看到这样的物体（相机起点下方的一个简单的灰色/黑色矩形棱镜）

<a-scene embedded>
    <a-entity
          geometry="primitive: box; width: 6; height: 0.5; depth: 3"
          position="0 0 -1.5"
          material="color: #333"
    ></a-entity>
</a-scene>

我不确定这是否相关，但我正在使用 vite 和 React（如果你从我之前的陈述中看不出）。

我是否应该通过其他方式加载该资源，然后在场景中渲染该资源？我是否在对象内部进行剪裁，因为它渲染得非常大并且相机不知何故位于内部？如果是这种情况，那么为什么当我缩小检查器时看不到我的模型？

我需要推迟渲染直到完全加载资源吗？我如何使用事件侦听器来准确了解我的 .glb 文件何时准备好渲染？我可以用 useEffect 来控制它吗？我疯了吗？

Answer 1

A-Frame 可能无法直接与 React 配合使用？ Mira esta 回复:

https://stackoverflow.com/a/45443685/27857856

如果它解决了您的问题，请告诉我们。