a-frame 的 gltf 查看器

Question

我正在尝试使用 a-frame 构建 gltf 查看器。这个想法是让用户上传一个gltf模型并显示模型。与 Don Mccurdy 使用 ThreeJs 的 gltf 查看器非常相似，但使用的是 a-frame。

我会让用户使用输入标签将文件上传到服务器

<input id="file-upload" multiple type="file">

然后使用下面的代码获取相同的文件进行显示

<a-scene embedded="" renderer="gammaOutput: true">
     <a-assets>
         <a-asset-item id="model" src="/models/filname.glb"></a-asset-item>
     </a-assets>

     <a-entity camera="" position="0 1.6 0" look-controls></a-entity>
     <a-entity gltf-model="#model" position="4 0 -6.5"></a-entity>
</a-scene>

我无法弄清楚的一件事是如何使用上传模型的路径动态填充 a-asset-item 标签的 src？我想为每个上传的模型创建一个新的嵌入式 div 并保留视图。你能帮忙指点一下吗？

Answer 1

找到了在上传时将模型保存在本地存储中然后从本地存储更新源的逻辑URL。

a-frame 的 gltf 查看器

gltf viewer for a-frame

three.js

aframe