aframe动态导入gltf文件

Question

所以我有一个简单的 gltf 文件，我想在运行时用 a-frame 导入它。

我已经尝试将 gltf 字符串转换为 URL 并加载它，但是这给出了 components:gltf-model:warn Cannot read properties of undefined (reading '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>

实现这个的方法是什么？

This is my glitch project

Answer 1

字符串中有错别字，这是找出错误的简单方法：

将缓冲区保存在文件中 test.gltf。
扔进gltf-viewer
发现有错字（来自错误this.json.accessors is undefined）
将cacessors更改为accessors
瞧：

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>

aframe动态导入gltf文件

Aframe dynamic importing of gltf file

aframe

gltf