"Upon requesting three gltf files, the response was found to

Question

"Upon requesting three gltf files, the response was found to

Currently, I am utilizing the GLTF loader for the purpose of importing a custom model into my scene.

Within my codebase, there exists a class called Spaceship.js that manages the loading of the model.

// Spaceship.js

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

export default class Spaceship {
  constructor() {
    this.GLTFLoader = new GLTFLoader();

    this.loadModel(this.GLTFLoader, './spaceship_model.gltf').then(result => {
      this.model = result.scene;
    });
  }

  loadModel(loader, url) {
    return new Promise((resolve, reject) => {
      loader.load(
        url,

        gltf => {
          resolve(gltf);
        },

        undefined,

        error => {
          console.error('An error happened.', error);
          reject(error);
        }
      );
    });
  }
}

Additionally, there is a class called ThreeShell.js which serves as a container for the entire three.js scene.

import * as THREE from 'three';
import Spaceship from './Spaceship.js';

export default class ThreeShell {
  constructor(container = document.body) {
    this.container = container;
    this.setup();
  }

  setup() {
    ...

    this.spaceship = new Spaceship();
    console.log(this.spaceship);
    console.log(this.spaceship.model);

    ...
  }
}

Upon inspection, I discovered that when logging this.spaceship, an object with the model property is displayed. However, logging this.spaceship.model yields undefined.

https://i.sstatic.net/oHhH2.png

My suspicion is that this issue might be related to the handling of promises, an area in which I currently lack expertise. Hence, I am seeking your assistance in resolving this matter.

javascript promise three.js this gltf

Answer 1

Answer №1

The GLTFLoader is designed to load assets asynchronously.

this.rocketShip = new RocketShip(); // Loading process initiates...
console.log(this.rocketShip);

// The "model" property doesn't exist yet as it's being accessed immediately, before the loading is complete
console.log(this.rocketShip.model);

If you wish to access the this.rocketShip.model, you must utilize the Promise outside the RocketShip class:

this.rocketShip = new RocketShip(); // Avoid loading in the constructor...
console.log(this.rocketShip);

// Trigger the load function here
this.rocketShip.loadModel().then((result) => {
    // Now the GLTF model will be available since you're waiting for the asynchronous callback
    console.log(result.scene);
});

It seems like you understand how Promises work, but if you need more clarity, you can refer to this explanation.

Answer 2

The GLTFLoader is designed to load assets asynchronously.

this.rocketShip = new RocketShip(); // Loading process initiates...
console.log(this.rocketShip);

// The "model" property doesn't exist yet as it's being accessed immediately, before the loading is complete
console.log(this.rocketShip.model);

If you wish to access the this.rocketShip.model, you must utilize the Promise outside the RocketShip class:

this.rocketShip = new RocketShip(); // Avoid loading in the constructor...
console.log(this.rocketShip);

// Trigger the load function here
this.rocketShip.loadModel().then((result) => {
    // Now the GLTF model will be available since you're waiting for the asynchronous callback
    console.log(result.scene);
});

It seems like you understand how Promises work, but if you need more clarity, you can refer to this explanation.

Answer 3

Answer №2

Marquizzo pointed out that the model loads asynchronously, making these lines ineffective:

    this.spaceship = new Spaceship();
    console.log(this.spaceship.model);

Fortunately, there are multiple solutions to this problem.

One approach is to include a wait function that returns the loading promise and utilize an async function to await it:

// Spaceship.js

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

export default class Spaceship {
  constructor() {
    this.GLTFLoader = new GLTFLoader();

    this._loadingPromise = this.loadModel(this.GLTFLoader, './spaceship_model.gltf').then(result => {
      this.model = result.scene;
    });
  }

  waitForLoad() {
    return this._loadingPromise;
  }

  loadModel(loader, url) {
    return new Promise((resolve, reject) => {
      loader.load(
        url,

        gltf => {
          resolve(gltf);
        },

        undefined,

        error => {
          console.error('An error occurred.', error);
          reject(error);
        }
      );
    });
  }
}

Then, in the setup:

import * as THREE from 'three';
import Spaceship from './Spaceship.js';

export default class ThreeShell {
  constructor(container = document.body) {
    this.container = container;
    this.setup();
  }

  async setup() {
    ...

    this.spaceship = new Spaceship();
    console.log(this.spaceship);
    await this.spaceship.waitForLoad();
    console.log(this.spaceship.model);

    ...
  }
}

This alternative approach is not necessarily superior or inferior, but simply demonstrates there are alternative methods without moving the loading process out of the constructor.

You can also achieve the desired outcome like so:

  setup() {
    ...

    this.spaceship = new Spaceship();
    console.log(this.spaceship);
    this.spaceship.waitForLoad().then(() => {
      console.log(this.spaceship.model);
    });

    ...
  }

Answer 4

Marquizzo pointed out that the model loads asynchronously, making these lines ineffective:

    this.spaceship = new Spaceship();
    console.log(this.spaceship.model);

Fortunately, there are multiple solutions to this problem.

One approach is to include a wait function that returns the loading promise and utilize an async function to await it:

// Spaceship.js

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

export default class Spaceship {
  constructor() {
    this.GLTFLoader = new GLTFLoader();

    this._loadingPromise = this.loadModel(this.GLTFLoader, './spaceship_model.gltf').then(result => {
      this.model = result.scene;
    });
  }

  waitForLoad() {
    return this._loadingPromise;
  }

  loadModel(loader, url) {
    return new Promise((resolve, reject) => {
      loader.load(
        url,

        gltf => {
          resolve(gltf);
        },

        undefined,

        error => {
          console.error('An error occurred.', error);
          reject(error);
        }
      );
    });
  }
}

Then, in the setup:

import * as THREE from 'three';
import Spaceship from './Spaceship.js';

export default class ThreeShell {
  constructor(container = document.body) {
    this.container = container;
    this.setup();
  }

  async setup() {
    ...

    this.spaceship = new Spaceship();
    console.log(this.spaceship);
    await this.spaceship.waitForLoad();
    console.log(this.spaceship.model);

    ...
  }
}

This alternative approach is not necessarily superior or inferior, but simply demonstrates there are alternative methods without moving the loading process out of the constructor.

You can also achieve the desired outcome like so:

  setup() {
    ...

    this.spaceship = new Spaceship();
    console.log(this.spaceship);
    this.spaceship.waitForLoad().then(() => {
      console.log(this.spaceship.model);
    });

    ...
  }

"Upon requesting three gltf files, the response was found to

Answer №1

Answer №2

Similar questions

Is it true that Vue 3 + Inertia automatically removes event listeners upon component unmounting?

Unable to bind `this` using `call` method is not functioning as expected

saving the hash key in a separate array

What is the best way to manage Page Refresh using Angular.js?

Failure to retrieve blob - net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

Design an interactive div element that allows users to modify its content, by placing a span

Angular Typescript error: Trying to assign a value to 'someProperty' property of an undefined object

Enabling table row scrolling with keyboard navigation in React

Using React to easily rearrange images by dragging and dropping them

Retrieving status code without reliance on a back-end language (maybe through JavaScript?)

What could be causing my Javascript prompts to not appear in my Express.IO .ejs file?

I am looking to view all products that belong to the category with the ID specified in the request, and have red-colored stocks

Numerous data retrieval commands within the componentWillMount lifecycle method

Can a layer be sliced to create a text-shaped cutout?

I'm unsure about the JavaScript toolkit framework's handling of selecting HTML class attributes

Preventing pop-up windows from appearing when triggered by a mouse click event

Display toggle malfunctioning when switching tabs

Executing JavaScript code from an external link

``I am encountering an issue where the highlighted color of a textbox is not being

Passing data from an Express middleware to a Jade template