询问在第8墙云编辑器中使用Blob URL加载glTF模型

Question

我无法在 A-Frame 的

gltf-model

组件中将从外部服务器获取的模型显示为 Blob URL，并将其作为

a-entity

元素添加到第 8 墙云编辑器中的正文中。

实现如下：

app.js

...
import {TestAddmodelToBodyComponent} from './scripts/test-setAttribute'
AFRAME.registerComponent('test-setattribute', TestAddmodelToBodyComponent)
...

body.html

<a-scene
  test-setattribute
  renderer="colorManagement: true"
  xrweb="enableVps: true; allowedDevices: any">
  <a-assets>
    ・
    ・
    ・
  </a-assets>
  <a-entity id="model"></a-entity>
</a-scene>

测试.tsx

function TestAddmodelToBody(urlPath) {
  const targetentity = document.querySelector('#model')
  const username = '□□'
  const password = '○○'
  const encodedCredentials = btoa(`${username}:${password}`)
  fetch(urlPath, {
    headers: {
      'Authorization': `Basic ${encodedCredentials}`,
    },
  }).then(res => res.blob()).then((blob) => {
    // The blob's type is 'application/octet-stream', so change it to 'model/gltf-binary'.
    const gltfBlob = blob.slice(0, blob.size, 'model/gltf-binary')
    // Generate the Blob URL.
    const blobUrl = window.URL.createObjectURL(gltfBlob)
    // Set the `gltf-model` attribute.
    targetentity.setAttribute('gltf-model', blobUrl)
  })
}

export const TestAddmodelToBodyComponent = {
  async init() {
    TestAddmodelToBody('https://○○')
  },
}

A-Frame版本是1.5.0。

当我使用此实现启动 Web 应用程序时，gltf-model 组件设置为 。

问题是gltf-model组件的值为空。以下是 Chrome 开发者工具确认的状态。

<a-entity id="model" gltf-model=""></a-entity>

如果有人有任何提示或解决了类似的问题，我将非常感谢您的建议。

顺便说一句，实现此行为需要域名和 SSL 证书。可能很难立即重现该问题。

我通过电子邮件与 8thwall 支持团队讨论了这个问题。

基于这次咨询，我决定咨询外部社区，因为我无法实现我被告知可以完成的事情，并尝试使用 8thwall 云编辑器来实现它。

如果您想查看交流，请告诉我。如果您联系我并给予我许可，我会在这里发布。

Answer 1

您遇到的问题 -

gltf-model

的

<a-entity>

属性仍然为空 - 表明正在生成和设置的 URL 无效或无法访问 A-Frame 进行渲染。

可能出现的问题：

Blob MIME 类型问题：

• 您设置的 blob 的 MIME 类型是

  model/gltf-binary

  ， 这对于

  .glb

  文件是正确的。但是，如果源文件是 .gltf，这可能会导致问题。
• 确认源文件格式

  (.gltf or .glb)

  并确保正确 MIME 类型

  (model/gltf+json for .gltf)

  。

Blob URL 生成：

• 确保

  blobUrl

  有效且可访问。
• 检查是否有错误 在获取或 blob 转换步骤期间。

gltf-model Attribute

异步设置：

• 由于模型是异步获取的，因此请确保仅在成功创建 Blob URL 后设置该属性。

跨源限制：

• 即使您正在验证请求，也可能存在 CORS 问题，导致 Blob 无法正确加载。

第八墙集成：

• 确保xrweb组件不干扰渲染 模型的。

这是代码的增强版本，带有额外的检查和调试日志记录 (

test.tsx

)：

function TestAddmodelToBody(urlPath: string) {
  const targetEntity = document.querySelector('#model');
  const username = '□□';
  const password = '○○';
  const encodedCredentials = btoa(`${username}:${password}`);

  fetch(urlPath, {
    headers: {
      Authorization: `Basic ${encodedCredentials}`,
    },
  })
    .then((res) => {
      if (!res.ok) {
        throw new Error(`Failed to fetch the model: ${res.status} ${res.statusText}`);
      }
      return res.blob();
    })
    .then((blob) => {
      const mimeType = 'model/gltf-binary'; // Change if the source is .gltf
      const gltfBlob = blob.slice(0, blob.size, mimeType);

      const blobUrl = window.URL.createObjectURL(gltfBlob);

      console.log('Blob URL generated:', blobUrl);

      // Set the `gltf-model` attribute
      targetEntity?.setAttribute('gltf-model', blobUrl);

      // Verify that the attribute has been set
      console.log('gltf-model attribute set to:', targetEntity?.getAttribute('gltf-model'));
    })
    .catch((error) => {
      console.error('Error fetching or processing the model:', error);
    });
}

export const TestAddmodelToBodyComponent = {
  async init() {
    const modelUrl = 'https://○○'; // Replace with your actual URL
    TestAddmodelToBody(modelUrl);
  },
};

您还可以：

1。检查控制台日志：

• 在浏览器控制台中查找生成的

  blobUrl

  。
• 验证 MIME 类型并确保其与预期的文件格式匹配。
• 使用本地

  .glb

  文件进行测试：
• 将获取逻辑替换为指向本地或受信任服务器上托管的已知工作

  .glb

  文件的直接 URL。

2。验证 Blob URL 可访问性：

• 在新的浏览器选项卡中打开 blobUrl 以验证它是否指向有效的资源。
• 检查网络选项卡：
• 检查网络请求以确保其成功获取文件并具有正确的 MIME 类型。

3.启用 CORS 调试：

• 在提供模型的服务器上添加适当的 CORS 标头。

4。在 8th Wall 中测试。 如果更新后的实现仍然失败，请尝试以下操作：

• 确保 8th Wall 项目正确配置了您的域名和 SSL。
• 联系 8th Wall 支持，获取控制台日志中的调试信息。