如何在 Three.js 中加载文件八位字节流 3d 模型

Question

我将模型 .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)
            })
       })

Answer 1

您可以像加载其他任何内容一样加载 url -- 它只是 returns GLTF 文件的内容。但是，假设“newFile”是您发布的 url，您的代码中有几处需要更改。

如果您希望使用 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)
})

如何在 Three.js 中加载文件八位字节流 3d 模型

How to load file octet-stream 3d model in Three.js

javascript

three.js