如何在 Three.js 中加载文件 octet-stream 3d 模型答案

【问题标题】：How to load file octet-stream 3d model in Three.js如何在 Three.js 中加载文件 octet-stream 3d 模型
【发布时间】：2021-09-25 05:27:15
【问题描述】：

我将模型 .glb 加载到 s3 服务，然后我从 s3 获取的 url 是 https://test-image-prevaa-123.s3.amazonaws.com/test/1626336255367.octet-stream。如何从这个 url 加载模型到 three.js。我从我的代码加载然后模型没有显示。我是three.js 的新手。我在控制台Unexpected token g in JSON at position 0 中收到此错误我猜在我将.glb 文件上传到s3 服务后，文件更改为.octet-stream。我不确定如何将 .octet-stream 加载到 three.js。谢谢你的建议。我不确定将 .octet-stream 模型加载到 three.js

我的代码

  const data = this
  const loaderFile = new THREE.FileLoader()
      loaderFile.load(newFile, async function (file) {
           const loader = new GLTFLoader()
           loader.parse(file, '', function (glb) {
               const mesh = glb.scene
               mesh.scale.set(2, 2, 2)
               data.scene.add(mesh)
               data.animate(mesh)
            })
       })

【问题讨论】：

标签： javascript three.js

【解决方案1】：

您可以像加载任何其他网址一样加载该网址——它只返回 GLTF 文件的内容。但是，假设“newFile”是您发布的网址，那么您的代码中需要更改一些内容。

如果您想使用 FileLoader，您需要将 responseType 设置为 arraybuffer，这是 GLTFLoader.parse 所期望的（请参阅 GLTFLoader Docs）：

const data = this
const loaderFile = new THREE.FileLoader()

// added this line:
loaderFile.setResponseType( 'arraybuffer' )

loaderFile.load(newFile, async function (file) {
    const loader = new GLTFLoader()
    loader.parse(file, '', function (glb) {
        const mesh = glb.scene
        mesh.scale.set(2, 2, 2)
        data.scene.add(mesh)
        data.animate(mesh)
    })
})

或者，您可以完全跳过使用FileLoader，直接使用GLTFLoader.load：

const data = this
const loader = new GLTFLoader();
loader.load(newFile, function (glb) {
    const mesh = glb.scene
    mesh.scale.set(2, 2, 2)
    data.scene.add(mesh)
    data.animate(mesh)
})

【讨论】：

哦！谢谢。我有点困惑