Setting a preloaded model as a property value in Three.js object

I'm fairly new to Three.js and I have a question. Is it possible to load a 3D model into Three.js and maintain that loaded model as a value in my object? The issue is, when I try to do this, I encounter a problem where I can't access this.instance later in other functions within my object.

    constructor(name,chords,scene){
        this.instance;
        var mtlLoader = new THREE.MTLLoader();
        mtlLoader.setTexturePath(`/assets/${name}/`);
        mtlLoader.setPath(`/assets/${name}/`);
        mtlLoader.load(`${name}.mtl`, (materials) => {
            materials.preload();
            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.setPath(`/assets/${name}/`);
            objLoader.load(`${name}.obj`, (object) => {
                this.instance=object;
                
                scene.add(this.instance);
                
            });
    });

Answer №1

Initially, it's important to note that the line this.instance; serves no purpose. Additionally, what exactly do you mean by stating "I can't use this.instance later in other functions"? Are you encountering a runtime error when trying to access instance?

To err on the side of caution, consider adding the following as the first line in your constructor:

const scope = this;

Then, within your onLoad() callback, utilize scope.instance = object.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you disable listeners and minimize performance impact in concealed React components?

In order to meet our requirements, we need to display the same react component in various positions on our grid and toggle their visibility based on screen width. For example, our product module component will be displayed at position 3 on mobile devices a ...

Create a PHP file with various functions and access them using jquery.post or jquery.get in a separate JavaScript file

Is there a way to call multiple PHP functions from my JavaScript file using Jquery.post? Typically, we use Jquery.post to call a PHP file and pass various values as post data. function new_user(auth_type, tr_id, user_name, email) { $.post("bookmark.p ...

Sending non-textual data within a JQuery ajax POST request

I have encountered an issue related to sending data from a JavaScript application to a Node.js server for database query purposes. Despite trying to find a solution from various sources, I have been unable to resolve it. Here is the code snippet used to s ...

How to Stop Browser Tooltip from Displaying HTML Tags within "innerHtml" in Angular 6

In my Angular application, a template is using the following code snippet: ... <span [innerHtml]="textVar"></span> ... The textVar variable is created to allow for special styling on certain characters or strings. It's formatted using th ...

A step-by-step guide on utilizing links for downloading PDF files in Vue/Nuxt

Having some trouble opening a PDF tab in my Vue application with NUXT and Vuetify... any suggestions? I attempted to use: <a href="../static/docs/filename.pdf" target="_blank">Download PDF</a> I also tried using <nuxt-link> but it didn ...

Invoking a nested function within an array

I need to trigger a function with a button click. The function I want to call is nested within another function, which is part of an array. demo = { volej: function(param) { (new initChartist).users(param); }, initPickColor: function(){ ...

Guide to showcasing user input using a Javascript function

I need assistance to show the user input via the submit button. Users will enter tool types and the first five inputs will be displayed in list items (li). Once the limit of 5 tools is reached, a message 'Thanks for your suggestions' should appea ...

What sets apart using JQuery to run AJAX from using plain XMLHttpRequest for AJAX requests?

Can you explain the advantages and disadvantages of using JQuery versus XMLHttpRequest for running AJAX code? While I understand that JQuery is essentially a JavaScript library, there must be some key differences to consider. Please elaborate on this top ...

Debugging a node.js application remotely using SAP Cloud Foundry

Having successfully deployed multiple node.js express services on SAP Cloud Foundry, we have encountered a roadblock in the form of remote debugging. Recognizing that others may be facing similar challenges, we are putting forth a direct inquiry: What is ...

JQuery drop-down menu not showing submenus

Currently, I have integrated a Dynamic Drive Script to create a sleek drop-down menu. You can view my website with the implemented menu here. (the menu is represented by the black bar in the middle). Although most functionalities are working smoothly, I ...

Managing active dropdown menus in VueJS

I'm having trouble figuring out why my navigation menu and method to open subitems on click are not working correctly. [![dropdown_menu][1]][1] new Vue({ el: '#app', data: { //menu "menu_title": "a", "child_ro ...

Is it possible that when using Sequelize fixtures to import a model as a function, errors occur if the data is not properly imported from a JSON

I'm currently working on a node.js project that utilizes express and sequelize. I want to add fixtures to populate my data tables. For this purpose, I am using the Sequelize-fixtures npm package. Below is the content of my fixtures.js file: 'us ...

using javascript to dynamically color rows in a table based on the value in the status field

Hi, I'm new to javascript and seeking help for my table coloring issue. I have a dynamic table where data is inserted through an Ajax call. The goal is to color specific records based on their status. I attempted a solution but only one record gets c ...

Experiment with erroneous scenarios using React, Jest, and React-Testing-Library

I've encountered an issue with a React component that triggers an Error when there is faulty programming. Specifically, the Component requires a prop called data, and I have the following code snippet in place to check for its existence: if (!data) { ...

Freezing the website by setting async to false

I've been having issues with my website freezing when using async set to false. I need confirmation before executing the script. $.ajax({ type: "POST", url: url, data: form.serialize(), async: false, success: function(data) { ...

Creating a Route in Angular 2 for a Component other than the one initialized with the bootstrap function

I am currently in the process of working on a project involving Angular2. If you are interested in understanding why I need to do what I am about to explain, please take a look at this issue. The main component in my project is called AppComponent and it ...

The ng-model in AngularJS is experiencing issues with two-way binding within a directive

Seeking to develop a straightforward Angular directive for handling currency input. The objective is to have it operate as a float in the model while showing two decimal places to the user. The code implemented for this purpose is as follows: // Currenc ...

Consistent Errors with AJAX POST Requests Despite CORS Enablement

Here is a function I have created for making an ajax post request: function POST(url, data) { $.ajax({ 'type' : "POST", 'url' : url, 'data' : data, headers : { 'Access-Cont ...

Update the existing code to incorporate icons into the column formatting

I'm seeking assistance from someone knowledgeable in JSON or coding as this is not my area of expertise. In my sharepoint online list, I have customized the display to show different colors based on the text content in each item. Now, I am looking to ...

Exploring the process of sending props via the render method in Vue.js and observing their behavior

Struggling with passing a prop from a parent component down to a child created using CreateElement/render in vue.js and then watching it. Here is the parent component: Vue.component('my-drawing', MyDrawing) new Vue({ el: '#drawing' ...