What is the process for removing a mesh that has been uploaded using a function and then added to an Object3D?

// Defining variables for 3 obj models: cushion, backrest, and frame, and a group variable chair01 to include all 3 obj models
            var cushion;
            var backrest;
            var frame;

            var chair01 = new THREE.Object3D();
            var loader = new THREE.OBJLoader( manager );

// Loading obj models using a function
            loadObj("chair/obj/cushion.obj", cushion, materialCushion);
            loadObj("chair/obj/backrest.obj", backrest, materialBackrest);
            loadObj("chair/obj/frame.obj", frame, materialFrame);

            function loadObj(path, name, material) {
                loader.load('model-stuff/' + path, function( object ) {
                        object.traverse( function ( child ){
                            if ( child instanceof THREE.Mesh ) {
                                var uvs = child.geometry.attributes.uv.array;
                                child.geometry.addAttribute( 'uv2', new THREE.BufferAttribute( uvs, 2 ) );
                                child.material = material;
                                child.receiveShadow = true;
                                child.castShadow = true;
                            }
                        });
                    name = object;
                    name.position.y = -10;
                    chair01.add( name );
                }, onProgress, onError);
            }

// Adding chair01 to the scene
            scene.add(chair01);

// Removing frame from chair01
            manager.onLoad = function() {
                chair01.remove(frame);
            }

In the code above, obj models are loaded using the loadObj function. However, there seems to be an issue with removing the "frame" from chair01.

I have attempted an alternative method, and it seems that when the obj models are not loaded via the loadObj function, I am able to successfully remove the frame from chair01.

Answer №1

The car "chassis" parameter is passed to the loadObj function, however it remains undefined. The variable representing the chassis is not defined anywhere in the code after that point. It seems that this issue is caused by scope closure on the parameter. To resolve this, an object is needed to maintain persistence.

// Define 3 obj models: cushion, backrest, and chassis, and a group named chair01 to include these 3 obj
var parts = {
    cushion: "cushion",
    backrest: "backrest",
    chassis: "chassis"
}

var chair01 = new THREE.Object3D();
var loader = new THREE.OBJLoader( manager );

// Load obj models using the loadObj function
loadObj("chair/obj/cushion.obj", parts.cushion, materialCushion);
loadObj("chair/obj/backrest.obj", parts.backrest, materialBackrest);
loadObj("chair/obj/chassis.obj", parts.chassis, materialChassis);

function loadObj(path, name, material) {
    loader.load('model-stuff/' + path, function( object ) {
        object.traverse( function ( child ){
            if ( child instanceof THREE.Mesh ) {
                var uvs = child.geometry.attributes.uv.array;
                child.geometry.addAttribute( 'uv2', new THREE.BufferAttribute( uvs, 2 ) );
                child.material = material;
                child.receiveShadow = true;
                child.castShadow = true;
            }
        });
        parts[name] = object;
        parts[name].position.y = -10;
        chair01.add( parts[name]);
    }, onProgress, onError);
}

// Add chair01 to the scene
scene.add(chair01);

// Remove chassis from chair01
manager.onLoad = function() {
    chair01.remove(parts.chassis);
}

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

JavaScript's Ajax request seems to be stagnant and inactive

Having some difficulties with the code below. It triggers an alert correctly, but the ajax part doesn't seem to be functioning. No errors or indications of what's wrong. $(document).on('change', '.department_select', function ...

Retrieve key-value pairs from a database and store them as variables in PHP before transferring them into an array in JavaScript

My challenge lies in loading Chinese characters as keys and their English translations as values from a database into a PHP array, so that I can use them on the client side in JavaScript. The process involves fetching key:value pairs from PHP into a JavaSc ...

Is the default behavior of Ctrl + C affected by catching SIGINT in NodeJS?

When I run my nodejs application on Windows, it displays ^C and goes back to the cmd prompt when I press Ctrl + C. However, I have included a SIGINT handler in my code as shown below: process.on('SIGINT', (code) => { console.log("Process term ...

The Flask AJAX request is returning an empty ImmutableMultiDict, whereas the same AJAX request successfully works with http.server

Making the switch from http.server to Flask has caused issues with my image upload functionality using AJAX. This is being done in Python 3. Attempts at troubleshooting that have failed: I have ensured multipart/form-data is included in the Ajax req ...

Navigating Through Different Environments in Your React Application

Currently, I am tackling a small project where I am utilizing React for the frontend and Java for the backend. The project involves two distinct environments. My main struggle revolves around effectively managing multiple environments. To set the API URL, ...

Dropdown selection triggers an Ajax request

I have encountered an issue while attempting to make an Ajax request to the page chosen in a drop-down menu. While most of my script code works fine in binding a mouse click to table rows, it seems to fail in this particular scenario. The error message I r ...

A dynamic context menu using jQuery within AJAX-loaded content

After spending hours searching for a solution without success, I am turning to this forum for help (I have come across similar questions but none of them have solved my issue). The problem I am facing is with implementing a custom context menu on a page t ...

Error: myFunction has not been declared

Can anyone figure out what's going on here? http://jsfiddle.net/sVT54/ <button onclick="myFunction()">Click me</button> <p id="demo"></p> function myFunction() { document.getElementById("demo").innerHTML="Hello World"; } ...

React JS makes it simple to create user-friendly cards that are optimized

I have a collection of objects that include a name and description. The name is short and consists of only a few characters, while the description can vary in length. I am looking to showcase this data within Cards in my React project, and have tried using ...

What's the best way to adjust the width of the <Input> component in Reactstrap?

How can I adjust the width of an input element in Reactstrap to be smaller? I've attempted to set the bsSize to small without success <InputGroup> <Input type="text" name="searchTxt" value={props.searchText ...

Executing a function while adjusting a range slider

Having an <input type="range"> element on my website presents a particular challenge. To handle changes in this element, I am using the following function: $("#selector").bind("change", function() { //perform desire ...

Concealing radial segments in Three.js

I'm wondering if there is a method to eliminate or conceal radial segments from ConeBufferGeometry, CylinderBufferGeometry, and similar shapes. I am still learning about 3D modeling and three.js, so I'm unsure if these segments are essential comp ...

Failure to establish connection between electron/socket.io client and python-socketio/aiohttp server

My websocket connection is failing at the moment, even though it was working perfectly just a couple of days ago. I attempted to fix the issue by downgrading electron from version 6 to 5.0.6, but unfortunately, this did not resolve the problem. https://i. ...

data retrieval not refreshing sorting post construction

My challenge involves fetching data from MongoDB with sorting. While it works perfectly on the development server, it fails to update the data after being built and hosted. import Review from "@/models/review"; import connectdb from "@/util/ ...

What is the best way to check if a function has been successfully executed?

When working with PDF documents, I often use an instance of pdfkit document known as doc: import PDFDocument from 'pdfkit' const doc = new PDFDocument() This doc instance is then passed into a function called outputTitle: export const outputTi ...

Selecting elements with jQuery allows you to manipulate the

Encountering issues with jQuery selectors. This is how my HTML looks: <form method="" action=""> <p id="question_1"> <h1 id="question">1. A Question</h1> <div id="choices"> ...

Stop React Form from automatically submitting by preventing automatic submission

I am currently facing an issue with a form that includes a rich text editor and a submit button. The problem arises when the style buttons in the rich text editor are clicked, causing the form inputs to submit unintentionally. My goal is to prevent this b ...

Having trouble triggering the button with querySelector in Angular

I have a dynamic page where I need to click on a button. I tried the code below, but it is not working and not showing any alert. However, if we use the same code in the browser console, it executes and shows an alert. Can someone please suggest how to r ...

JS roles encountered an issue with a TypeError: it is unable to read the property 'push' because it is undefined

I'm experiencing a problem with setting roles in the admin panel of my website. The roles I've configured are mmUser, mmMerchant, mmAdmin. When a user signs up, they are automatically assigned the mmUser role. In the admin panel, I'm attemp ...

When attempting to insert a date into a MySQL database using React.js, I encountered an issue with the date format

Hey everyone, I have set the input date to dd/mm/yyyy format using moment(donors.donateDate).format('DD-MM-YYYY'). However, when I click the submit button, an error is displayed in the console stating: The specified value "23-03-2022" ...