Step-by-step guide for importing a octet-stream 3d model into Three.js

Question

Step-by-step guide for importing a octet-stream 3d model into Three.js

I uploaded a model in .glb format to S3 services and obtained the URL

https://test-image-prevaa-123.s3.amazonaws.com/test/1626336255367.octet-stream

. How can I load this model into three.js? When I tried loading it from my code, the model failed to display. I am new to three.js and encountered the error in the console

Unexpected token g in JSON at position 0

. I suspect that after uploading the .glb file to S3 services, the file format changed to .octet-stream. I am unsure about how to load a .octet-stream file into three.js. Thank you for any suggestions on loading a .octet-stream model into three.js.

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

javascript three.js

Answer 1

Answer №1

To load the URL like any other, simply retrieve the content of the GLTF file. However, assuming that "newFile" is the URL you posted, there are a few adjustments needed in your code.

If you prefer to utilize FileLoader, ensure to set the responseType to arraybuffer as expected by GLTFLoader.parse (refer to 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, if you prefer to avoid using FileLoader altogether, you can directly utilize 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)
})

Answer 2

To load the URL like any other, simply retrieve the content of the GLTF file. However, assuming that "newFile" is the URL you posted, there are a few adjustments needed in your code.

If you prefer to utilize FileLoader, ensure to set the responseType to arraybuffer as expected by GLTFLoader.parse (refer to 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, if you prefer to avoid using FileLoader altogether, you can directly utilize 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)
})

Step-by-step guide for importing a octet-stream 3d model into Three.js

Answer №1

Similar questions

Automatically resizing font to fit the space available

I encountered an unexpected obstacle while reloading my Next.js application with animejs. The error message reads: "SyntaxError: Unexpected token 'export'." This unwelcome occurrence took place during the

The issue with Infinite Scrolling/Pagination feature in backbone.js persists

Is it possible for an object to be null even when its type is object

Is it possible to automatically close the modal by clicking outside of it

The useNavigate() function seems to be failing to redirect to the '/protected' route

Extracting information from JSON and presenting it in a structured table format

Unable to modify border color for Material-UI OutlinedInput

Hide the 1, 2, 3 page buttons in Datatables pagination and instead display only the Next and Previous buttons for navigation

When constructing a file directory URL, it is important to utilize the forward slash "/" in the filename

The concept of functions in JavaScript: fact or fiction?

Interacting with APIs using jQuery, managing responses with AJAX, handling parsererror in our development environment XAMPP on Windows 8

What could be the reason for webpack not making jQuery available as a global variable?

having difficulty transmitting parameter to angular directive

Bidirectional data binding in AngularJS custom directive

Listening for Angular 2 router events

Utilize javascript to activate the hyperlink

The most recent version of Autonumeric now permits the inclusion of a decimal point, even if the decimalPlaces parameter

What is the best way to implement a dynamic Menu Component in next.js?

Challenges faced with Vuetify's vertical and non-linear stepper components