CODEWITHSUNDEEP
javascriptthree.js
atjab
atjab

Reputation: 146

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

I load model .glb to s3 services then I get url from s3 is https://test-image-prevaa-123.s3.amazonaws.com/test/1626336255367.octet-stream. How to load model from this url to three.js. I load from my code then the model not showing. I'm new for three.js. I got this error in console Unexpected token g in JSON at position 0 I guess that after I uploaded .glb file to s3 services, file is change to .octet-stream. I'm not sure how to load .octet-stream to three.js. Thank for your suggestion. I'm not sure load .octet-stream model to three.js

my code

  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)
            })
       })

Upvotes: 0

Views: 1102

Answers (1)

Garrett Johnson
Garrett Johnson

Reputation: 2534

You can load that url like any other -- it just returns the content of the GLTF file. However assuming "newFile" is the url you posted there are a couple things that need to change in your code.

If you'd like you use FileLoader you need to set the responseType to arraybuffer which is what GLTFLoader.parse expects (see the 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)
    })
})

Alternatively you could skip using FileLoader entirely and use GLTFLoader.load directly:

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)
})

Upvotes: 1

Related Questions