What are some ways to ensure that my gltf loader in three.js operates synchronously?

Question

What are some ways to ensure that my gltf loader in three.js operates synchronously?

I have a question regarding my code. I'm currently working on making the loadCone() function synchronous using async/await, but I'm facing some issues with it.

import * as THREE from "three";

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

import conePath from "../../static/cone.glb";
import coneBaked from "../../static/coneBake.png";

import "regenerator-runtime/runtime";

export default class Cone {
    constructor() {
        this.cone;
        const textureLoader = new THREE.TextureLoader();

        const bakedTexture = textureLoader.load(coneBaked);
        const bakedMaterial = new THREE.MeshBasicMaterial({
            map: bakedTexture,
        });

        this.loadCone();
    }

    async loadCone() {
        // GLTF loader
        const gltfLoader = new GLTFLoader();
        const cone = await gltfLoader.load(
            conePath,
            (gltf) => {
                console.log("success");
                console.log(gltf.scene);
                this.cone = gltf.scene;
            },
            (progress) => {
                // console.log("progress");
                // console.log(progress);
            },
            (error) => {
                console.log("error");
                console.log(error);
            }
        );
    }

    getCone() {
        return this.cone;
    }
}

In another file, I am trying to add the cone like this:

const cone = new Cone();
this.scene.add(cone.getCone());

The issue I'm facing is that because getCone() is synchronous, it gets executed before loadCone() finishes loading the cone, resulting in getting undefined instead of the actual cone object.

Any suggestions on how I can make my async loadCone() function synchronous? I've tried using *.loadAsync()` but it didn't yield any different results.

Thank you in advance. So far, I haven't encountered any errors, except for the expected message saying "undefined is not an instance of THREE.Object3D".

javascript asynchronous async-await three.js synchronous

Answer 1

Answer №1

Although I am not familiar with three.js, it is important to note that the new keyword must synchronously return an initialized object, making it impossible to be asynchronous.

// ...
constructor() {
    this.cone;
    const textureLoader = new THREE.TextureLoader();

    const bakedTexture = textureLoader.load(coneBaked);
    const bakedMaterial = new THREE.MeshBasicMaterial({
        map: bakedTexture,
    });

    // avoid calling async methods here
    // this.loadCone();
}
//...

When calling the method...

import Cone from 'path to js that defines the class'

// inside an async function
async function doConeStuff() {
  const cone = new Cone();
  await cone.loadCone();
  this.scene.add(cone.getCone());
}

// or, at the top level
const cone = new Cone();
cone.loadCone().then(() => {
  this.scene.add(cone.getCone())
});

If we notice that loadCone mixes promises and callbacks, we can either promisify the current version used or consider @Leon.Z's suggestion regarding the promise-returning version for simplicy of the cone class like so...

export default class Cone {
    constructor() {
        const textureLoader = new THREE.TextureLoader();

        const bakedTexture = textureLoader.load(coneBaked);
        const bakedMaterial = new THREE.MeshBasicMaterial({
            map: bakedTexture,
        });
        this.cone = null;
    }

    async loadCone() {
        if (this.cone) Promise.resolve(this.cone);
        const gltf = await gltfLoader.loadAsync( 'model.gltf' ),
        this.cone = gilt.scene;
        return this.cone;
    }
    
    getCone() { return this.cone; }
}

In case @Leon.Z is mistaken about the promise method, below is how you can promisify the loader...

async loadCone() {
  const gltfLoader = new GLTFLoader();
  return new Promise((resolve, reject) => {
    gltfLoader.load(
      conePath,
      gltf => resolve(gilt.scene),
      error => reject(error)
    );
  });
}

Answer 2

Although I am not familiar with three.js, it is important to note that the new keyword must synchronously return an initialized object, making it impossible to be asynchronous.

// ...
constructor() {
    this.cone;
    const textureLoader = new THREE.TextureLoader();

    const bakedTexture = textureLoader.load(coneBaked);
    const bakedMaterial = new THREE.MeshBasicMaterial({
        map: bakedTexture,
    });

    // avoid calling async methods here
    // this.loadCone();
}
//...

When calling the method...

import Cone from 'path to js that defines the class'

// inside an async function
async function doConeStuff() {
  const cone = new Cone();
  await cone.loadCone();
  this.scene.add(cone.getCone());
}

// or, at the top level
const cone = new Cone();
cone.loadCone().then(() => {
  this.scene.add(cone.getCone())
});

If we notice that loadCone mixes promises and callbacks, we can either promisify the current version used or consider @Leon.Z's suggestion regarding the promise-returning version for simplicy of the cone class like so...

export default class Cone {
    constructor() {
        const textureLoader = new THREE.TextureLoader();

        const bakedTexture = textureLoader.load(coneBaked);
        const bakedMaterial = new THREE.MeshBasicMaterial({
            map: bakedTexture,
        });
        this.cone = null;
    }

    async loadCone() {
        if (this.cone) Promise.resolve(this.cone);
        const gltf = await gltfLoader.loadAsync( 'model.gltf' ),
        this.cone = gilt.scene;
        return this.cone;
    }
    
    getCone() { return this.cone; }
}

In case @Leon.Z is mistaken about the promise method, below is how you can promisify the loader...

async loadCone() {
  const gltfLoader = new GLTFLoader();
  return new Promise((resolve, reject) => {
    gltfLoader.load(
      conePath,
      gltf => resolve(gilt.scene),
      error => reject(error)
    );
  });
}

Answer 3

Answer №2

I'm a bit confused about what you're trying to achieve.

This is how I've been able to make it work:

  // Loading a glTF file
  async loadGltfFile(url) {
    // console.log('===== start loadGltfFile async')
    let urlString = url.toString()  // The loading process requires a string URL format, so we convert it first
    let gltf = await gltfLoader.loadAsync(urlString)
    // console.log('========== end loadGltfFile')
    return gltf
  }

To access the scene in the result, use result.scene

Answer 4

I'm a bit confused about what you're trying to achieve.

This is how I've been able to make it work:

  // Loading a glTF file
  async loadGltfFile(url) {
    // console.log('===== start loadGltfFile async')
    let urlString = url.toString()  // The loading process requires a string URL format, so we convert it first
    let gltf = await gltfLoader.loadAsync(urlString)
    // console.log('========== end loadGltfFile')
    return gltf
  }

To access the scene in the result, use result.scene

Answer 5

Answer №3

According to the official documentation, you can utilize the loadAsync method provided by threejs loaders in the following manner.

await gltfLoader.loadAsync( 'model.gltf' ),

Answer 6

According to the official documentation, you can utilize the loadAsync method provided by threejs loaders in the following manner.

await gltfLoader.loadAsync( 'model.gltf' ),

What are some ways to ensure that my gltf loader in three.js operates synchronously?

Answer №1

Answer №2

Answer №3

Similar questions

Ways to invoke a controller function from a window listener function

Tips for declaring a non-reactive instance property in Vue.js with TypeScript

Issue with jQuery animation delay functionality experiencing issues specifically in Google Chrome browser

Deploying an Angular 2 application using SystemJS and Gulp can sometimes feel cumbersome due to its

Issue encountered: Trying to deploy firebase functions and hosting with vue-cli v3 and node.js leads to an error "No npm package found in functions source directory

Locating specific text within an <li> element using the provided value

When the clearInterval function is invoked - either when the timer is modified or when the rendering is detached from the setInterval it is linked to

Discover the secrets to easily finding specific items within a table by harnessing the power of the table sorter plugin with

FireFox 3.0.1: Failure to Modify Width and Height Using jQuery

Retrieve all files from a directory that include a specific string, store the file names in an array, and then return the array using

In my efforts, I am attempting to retrieve a value using JavaScript in order to send it back to PHP in JSON format

Modify: "Alter the background color of the parent container for elements that are deemed invalid during

Automatically reveal or conceal an element based on the entry of a value in an input field, without relying on the keyup() or click events

Dependable Timeout Functionality in JavaScript

CSS class for Angular drag-and-drop functionality during drag operation

I seem to be struggling with hiding/showing a div element. Can you figure

Alter the class when $dirty occurs in Angular

Top Margin: Supported by Chrome and Safari

Obtain the complete source code by using the responseText property of the XMLHttpRequest object

What is the best way to export a React Material-UI component with two separate styles objects in Material-UI V1?