Working with Three.js: Retrieving an object post-loading using GLTF Loader

Question

Working with Three.js: Retrieving an object post-loading using GLTF Loader

Is there a method in three.js using the GLTF loader to access an object for transformations after it has been loaded?

It seems like attempting this approach does not yield results

gltf.scene.position.set(10,10,10)

Sample Code:

function getObject(){
    var loader = new THREE.GLTFLoader();

    loader.load('sample.gltf',
        function ( gltf ) {
            scene.add( gltf.scene );

        },
        function ( xhr ) {
            //console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
        },
        function ( error ) {
            //console.log( 'An error occurred' );
        }
    );
}

getObject()

// Perform Translation
gltf.scene.position.set(10,10,10)

javascript three.js

Answer 1

Answer №1

A key aspect to keep in mind is scoping and ensuring that the variables you need are accessible throughout your application.

Take a look at this example's source -

Observe how the variables are defined and utilized within the code (specifically on lines 54,55).

var container, stats, controls;
var camera, scene, renderer, light;

It's crucial to note that the gltf model data will not be readily available until it has finished loading. Therefore, you must implement a method to handle this as well. It's likely that the position of the gltf model cannot be set before it finishes loading.

The LoadingManager serves as an effective tool for managing this process -

You could trigger an init() function once all your resources have been loaded completely.

Here's an illustration tailored to your situation:

var model;

function loadObject(){
    var loader = new THREE.GLTFLoader();

    loader.load('test.gltf',
        function ( gltf ) {

            model = gltf;
            scene.add( model );

            init();

        },
        function ( xhr ) {
            //console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
        },
        function ( error ) {
            //console.log( 'An error happened' );
        }
    );
}

loadObject()

function init() {
    // Translate
    model.scene.position.set(10,10,10);
}

Answer 2

A key aspect to keep in mind is scoping and ensuring that the variables you need are accessible throughout your application.

Take a look at this example's source -

Observe how the variables are defined and utilized within the code (specifically on lines 54,55).

var container, stats, controls;
var camera, scene, renderer, light;

It's crucial to note that the gltf model data will not be readily available until it has finished loading. Therefore, you must implement a method to handle this as well. It's likely that the position of the gltf model cannot be set before it finishes loading.

The LoadingManager serves as an effective tool for managing this process -

You could trigger an init() function once all your resources have been loaded completely.

Here's an illustration tailored to your situation:

var model;

function loadObject(){
    var loader = new THREE.GLTFLoader();

    loader.load('test.gltf',
        function ( gltf ) {

            model = gltf;
            scene.add( model );

            init();

        },
        function ( xhr ) {
            //console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
        },
        function ( error ) {
            //console.log( 'An error happened' );
        }
    );
}

loadObject()

function init() {
    // Translate
    model.scene.position.set(10,10,10);
}

Working with Three.js: Retrieving an object post-loading using GLTF Loader

Answer №1

Similar questions

Tips for retrieving the most recent UI updates after the container has been modified without the need to refresh the browser

What are the steps to storing numerical inputs as variables using jQuery and then using them to perform calculations in order to update the input numbers

Checking the conditions and return statements within Jest testing framework

What is the benefit of using an IIFE in this particular way when constructing a JavaScript library?

Is it possible to modify a prop in a functional component?

Sending a text parameter to the JavaScript Executor within a Selenium framework

Explanation requested for previous response about returning ajax data to the parent function

Trouble with executing two asynchronous AJAX calls simultaneously in ASP.NET using jQuery

Copying a Pinia state Array without referencing it is not possible

Cutting-edge framework for Single Page Applications

Properly saving intricate form information in a React application

What is the best way to customize the CSS of the Skype contact me button?

Execute Babel task individually for each file instead of running it on the entire directory, Grunt

Contrasting gatsby-theme-material-ui and gatsby-plugin-material-ui

What is the best method to update the accessor value of my react table depending on certain data conditions?

What is the best way to apply a JQuery UI Tooltip to a newly added element?

Guide on launching a mobile application upon clicking a button in a mobile browser (with the assistance of JavaScript/React) [Utilizing Deep Linking]

Discovering the differences between input values in HTML when using scripts

Display array values in JavaScript from different arrays

High RAM consumption with the jQuery Vegas plugin