Aframe Dynamic导入GLTF文件

Question

因此，我有一个简单的GLTF文件，我想在运行时用A型框架导入它。

我已经尝试将GLTF字符串转换为URL并加载它，但是这给出了组件：GLTF模型：WARN无法读取未定义的属性（读取'0'）警告。这是我尝试的代码：

<a-scene>
  <a-entity id="entity" position="0 2 -5"></a-entity>
</a-scene>

<script>
  const gltfString = `{"cacessors":[{"bufferView":0,"byteOffset":0,"count":3,"componentType":5126,"extras":{},"type":"VEC3","min":[-0.5,-0.5,0.0],"max":[0.5,0.5,0.0]},{"bufferView":0,"byteOffset":12,"count":3,"componentType":5126,"extras":{},"type":"VEC3"}],"asset":{"extras":{},"version":"2.0"},"buffers":[{"byteLength":72,"uri":"data:application/octet-stream;base64,AAAAAAAAAD8AAAAAAACAPwAAAAAAAAAAAAAAvwAAAL8AAAAAAAAAAAAAgD8AAAAAAAAAPwAAAL8AAAAAAAAAAAAAAAAAAIA/","extras":{}}],"bufferViews":[{"buffer":0,"byteLength":72,"byteStride":24,"target":34962,"extras":{}}],"extras":{},"meshes":[{"extras":{},"primitives":[{"attributes":{"POSITION":0,"COLOR_0":1},"extras":{}}]}],"nodes":[{"extras":{},"mesh":0}],"scenes":[{"extras":{},"nodes":[0]}]}`;
  const gltfBlob = new Blob([gltfString]); // convert string to blob
  const gltfUrl = URL.createObjectURL(gltfBlob, {type: "text/plain"}); // blob to URL

  document.addEventListener('DOMContentLoaded', function (event) {
    const entity = document.querySelector('#entity');
        
    console.log(entity) // blob:http://localhost:5500/4efe2c0d-5568-4928-8820-2e686b5b0c2a

    bruhEntity.setAttribute('gltf-model', `url(${gltfUrl})`);
  });
</script>

实现这一目标的方法是什么？

这是我的小glitch项目

Answer 1

字符串中有一个错别字，这是找出问题的简单方法：

• 将缓冲区保存在文件test.gltf中。
• 将其扔进 gltf-viewer
• 找出有误（从错误从这个问题。
• ​
• ​

const gltfString = `{"accessors":[{"bufferView":0,"byteOffset":0,"count":3,"componentType":5126,"extras":{},"type":"VEC3","min":[-0.5,-0.5,0.0],"max":[0.5,0.5,0.0]},{"bufferView":0,"byteOffset":12,"count":3,"componentType":5126,"extras":{},"type":"VEC3"}],"asset":{"extras":{},"version":"2.0"},"buffers":[{"byteLength":72,"uri":"data:application/octet-stream;base64,AAAAAAAAAD8AAAAAAACAPwAAAAAAAAAAAAAAvwAAAL8AAAAAAAAAAAAAgD8AAAAAAAAAPwAAAL8AAAAAAAAAAAAAAAAAAIA/","extras":{}}],"bufferViews":[{"buffer":0,"byteLength":72,"byteStride":24,"target":34962,"extras":{}}],"extras":{},"meshes":[{"extras":{},"primitives":[{"attributes":{"POSITION":0,"COLOR_0":1},"extras":{}}]}],"nodes":[{"extras":{},"mesh":0}],"scenes":[{"extras":{},"nodes":[0]}]}`;

const gltfBlob = new Blob([gltfString], {
  type: "text/plain"
}); // convert string to blob
const gltfUrl = URL.createObjectURL(gltfBlob, ); // blob to URL

const entity = document.querySelector('#entity');
entity.setAttribute('gltf-model', `url(${gltfUrl})`);

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<a-scene renderer="colorManagement: true">
  <a-light position="0 2 -1.9" intensity=10 type="point"></a-light>
  <a-entity id="entity" position="0 2 -2"></a-entity>
</a-scene>