Create a variable within a nested function and assign it to the outer scope

Question

Create a variable within a nested function and assign it to the outer scope

I'm struggling to get this code up and running due to some issues with function scopes.

Here is the current state of my code:

var Canoe = function () {
    this.mesh = new THREE.Object3D();
    var loader = new THREE.JSONLoader();
    loader.load( 'models/canoe.json', function ( geometry, materials ) {
        var canoeMesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ));
        canoeMesh.castShadow = true;
        canoeMesh.receiveShadow = true;
        this.mesh.add(canoeMesh);
    });

}

This is the error message I keep encountering:

Cannot read property 'add' of undefined

Is there a way for me to properly assign the inner function's created mesh to the outer variable?

javascript three.js

Answer 1

Answer №1

To solve this issue, one approach is to store the mesh in a variable within the function:

var Boat = function () {
var mesh = new THREE.Object3D();
this.mesh = mesh;
var loader = new THREE.JSONLoader();
loader.load( 'models/boat.json', function ( geometry, materials ) {
    var boatMesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ));
    boatMesh.castShadow = true;
    boatMesh.receiveShadow = true;
    mesh.add(boatMesh);
});

Exploring how this behaves in javascript could fill entire chapters. Understanding it may not be straightforward as expected.

Answer 2

To solve this issue, one approach is to store the mesh in a variable within the function:

var Boat = function () {
var mesh = new THREE.Object3D();
this.mesh = mesh;
var loader = new THREE.JSONLoader();
loader.load( 'models/boat.json', function ( geometry, materials ) {
    var boatMesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ));
    boatMesh.castShadow = true;
    boatMesh.receiveShadow = true;
    mesh.add(boatMesh);
});

Exploring how this behaves in javascript could fill entire chapters. Understanding it may not be straightforward as expected.

Answer 3

Answer №2

Prior to calling loader.load(), include the following:

const self = this;

Within your load function, insert the following line of code:

self.mesh.add(canoeMesh);

The issue stems from "this" having a different reference within loader.load() compared to outside of the function.

Answer 4

Prior to calling loader.load(), include the following:

const self = this;

Within your load function, insert the following line of code:

self.mesh.add(canoeMesh);

The issue stems from "this" having a different reference within loader.load() compared to outside of the function.

Answer 5

Answer №3

There are a few ways to approach this situation. One option is to assign the value of this to another variable, as shown below:

var self = this;
var Boat = function () {
    self.mesh = new THREE.Object3D();
    var loader = new THREE.JSONLoader();
    loader.load( 'models/boat.json', function ( geometry, materials ) {
        var boatMesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ));
        boatMesh.castShadow = true;
        boatMesh.receiveShadow = true;
        self.mesh.add(boatMesh);
    });
}

Alternatively, if you're using a transpiler, you could use an arrow function which preserves the context of this:

var Boat = () => {
    this.mesh = new THREE.Object3D();
    var loader = new THREE.JSONLoader();
    loader.load( 'models/boat.json', function ( geometry, materials ) {
        var boatMesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ));
        boatMesh.castShadow = true;
        boatMesh.receiveShadow = true;
        this.mesh.add(boatMesh);
    });
}

Answer 6

There are a few ways to approach this situation. One option is to assign the value of this to another variable, as shown below:

var self = this;
var Boat = function () {
    self.mesh = new THREE.Object3D();
    var loader = new THREE.JSONLoader();
    loader.load( 'models/boat.json', function ( geometry, materials ) {
        var boatMesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ));
        boatMesh.castShadow = true;
        boatMesh.receiveShadow = true;
        self.mesh.add(boatMesh);
    });
}

Alternatively, if you're using a transpiler, you could use an arrow function which preserves the context of this:

var Boat = () => {
    this.mesh = new THREE.Object3D();
    var loader = new THREE.JSONLoader();
    loader.load( 'models/boat.json', function ( geometry, materials ) {
        var boatMesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ));
        boatMesh.castShadow = true;
        boatMesh.receiveShadow = true;
        this.mesh.add(boatMesh);
    });
}

Create a variable within a nested function and assign it to the outer scope

Answer №1

Answer №2

Answer №3

Similar questions

React: Avoid the visible display of conditional rendering component fluctuations

Tips for consolidating outputs from three different APIs using JavaScript and AJAX? [Pseudo code example]

"Unexpected behavior: NextAuth is failing to return defined custom scopes

Dealing with the Windows authentication popup in Protractor

The reducer and the store are experiencing a lack of synchronization

Tips for successfully sending data to an ng-include controller

Running JavaScript within Objective-C in a Cordova plugin

Javascript: regular expression to validate alphanumeric and special characters

Iterating through AJAX response using jQuery on Button Click

Determining the data type of a textbox value in JavaScript: String or Number?

Functionality that can be utilized repeatedly

Using NodeJS to assign key-value pairs to a JSON object

Is there a way to merge arrays in jQuery by pushing one array into another?

Exploring the wonders of accessing POST request body in an Express server using TypeScript and Webpack

Tips on navigating the scroller vertically as the user interacts with a selected div by scrolling up and down

Click the button to access the provided link

The React class component is throwing an unexpected error with the keyword 'this'

In JavaScript, navigate to a new page only after successfully transmitting data to the server

Automatically switch to the designated tab depending on the URL

Tips on creating a personalized memoizeOne function that delivers the accurate data type