Getting error : THREE.RGBELoader Read Error: no header found when trying to load a 3mb glb model from AWS twinmaker

Questions
, ,
1

Description

I’m trying to render a 3d model stored in an s3 bucket in use by AWS Twinmaker.
The code handles everything prety much and threejs is a peer dependency, and is internally used by the aws SDKs to render the 3D model on the UI.

In local, I can see that the model is retrieved and rendered properly.
Screenshot of the app working locally:
Screenshot 2023-06-20 at 6 01 13 PM

However, once the app is deployed to AWS amplify, I can see that the model is still being downloaded, but an error is popping up on the console stating “THREE.RGBELoader Read Error: no header found” and the progress bar is stuck at 100% and the model is not rendered.

Screenshot of the app not working in the deployment env:
Screenshot 2023-06-20 at 6 04 54 PM

I looked at the RGBELoader.js file, and the error is triggered at this line.
RGBELoader.js | searchcode(%20buffer,%7D

This looks like a buffer overflow, but decreasing the size of the model from 16mb to 2mb didn’t help.
Unable to understand what’s causing it.

threejs & aws iot-app-kit versions used :
“three”: “0.153.0”,
“@iot-app-kit/components”: “^5.9.0”,
“@iot-app-kit/core”: “^5.9.0”,
“@iot-app-kit/react-components”: “^5.9.0”,
“@iot-app-kit/scene-composer”: “^5.8.1”,
“@iot-app-kit/source-iottwinmaker”: “^5.9.0”,

React version : 18.2.0

Reproduction steps

  1. use aws iot scenemaker, create a scene and add a 3d model there.
  2. authenticate the react app and load the scene
  3. error pops out on the deployed environment but not on the local machine.

Code

// client side code to load the 3d model

import React, { useState, useEffect } from "react";
import { Grid } from "@mui/material";

import { IoTTwinMakerClient } from "@aws-sdk/client-iottwinmaker";
import { initialize } from "@iot-app-kit/source-iottwinmaker";
import { SceneViewer } from "@iot-app-kit/scene-composer";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity";
import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity";
import { useSelector } from "react-redux";
import { CONSTANTS } from "../../constants";

const Dashboard3DModelContainer = () => {
  const { jwtIdToken } = useSelector(
    (state) => state[CONSTANTS.SLICES.GENERAL]
  );

  const [currentScene, setCurrentScene] = useState(null);

  const UserPoolId = "userpoolId";
  const IdentityPoolId = "IdentityPoolId";

  async function getScene() {
    const cognitoidentity = new CognitoIdentityClient({
      credentials: fromCognitoIdentityPool({
        client: new CognitoIdentityClient({
          region: "us-east-1",
        }),
        identityPoolId: IdentityPoolId,
        logins: {
          [UserPoolId]: jwtIdToken,
        },
      }),
    });
    const credentials = await cognitoidentity.config.credentials();

    const iotTwinMakerClient = new IoTTwinMakerClient({
      region: "us-east-1",
      credentials: {
        accessKeyId: credentials.accessKeyId,
        secretAccessKey: credentials.secretAccessKey,
        sessionToken: credentials.sessionToken,
      },
    });

    const currentSceneLoader = initialize("<iot-twin-maker-workspace-id>", {
      iotTwinMakerClient,
      awsRegion: "us-east-1",
      awsCredentials: {
        accessKeyId: credentials.accessKeyId,
        secretAccessKey: credentials.secretAccessKey,
        sessionToken: credentials.sessionToken,
      },
    }).s3SceneLoader("<scene-id>");

    setCurrentScene(currentSceneLoader);
  }

  useEffect(() => {
    getScene();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <Grid>
      <Grid
        data-testid="scene-grid-container"
        sx={{
          ">div": {
            height: "56% !important",
            top: "auto",
          },
        }}
      >
        {!!currentScene && (
          <SceneViewer
            onWidgetClick={(device) => console.log("device details : ", device)}
            sceneLoader={currentScene}
          />
        )}
      </Grid>
    </Grid>
  );
};

export default Dashboard3DModelContainer;

Live example

can’t provide a public example as there’s a AWS identitypool.

Screenshots

No response

Version

0.153.0

Device

Desktop

Browser

Chrome

OS

MacOS

2

rgbe loads hdrs not models, are you sure you’re feeding your loaders the correct input?