Tips for utilizing my fiddle for subsequent data entry by incorporating new elements into the environment using three.js

Whenever I input a number for the second, third, etc. time in the textbox, I want to remove old objects and add new ones. Basically, I need to delete existing objects from the scene and then introduce new objects based on the new input. I have tried various solutions found on the web but none have worked for me. Can someone provide a working example or edit my fiddle?

Find my working fiddle here: Here

Below is the sample code snippet:

for (var i = 0; i < document.getElementById('txtN').value; i++) {

            var scale = 10;
            var conegeo = new THREE.Mesh(getGeometry(meshMaterial), new THREE.MeshFaceMaterial(meshMaterial));
            subset.push(conegeo);
            conegeo.doubleSided = true;
            conegeo.overdraw = true;
            conegeo.position.set(i*(0.5-Math.random())*scale, (0.5-Math.random()*scale, (0.5-Math.random())*scale);
            conegeo.updateMatrix();
            conegeo.matrixAutoUpdate = false;
            scene.add(conegeo);

        }

Any assistance would be greatly appreciated.

Answer №1

A breakthrough! By making the variables global, I have eliminated the need for them to change on every update. The code is now functioning properly and included in a button click event:

if (scene.children.length > 0)
           for (var i = scene.children.length - 1; i > 0; i--) {
               var child = scene.children[i];
               scene.remove(child);
               render(camera, scene);
           }

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

Place an element in relation to the vertical size of a div that includes written content

Currently, I am working on implementing a button with a popup that appears underneath it when the user hovers over it. The specific requirements for this setup are: The size of the button should not affect the size of the popup The popup should always be ...

Copy data from JSON file to Vue2 Google Maps markers

I recently started working on a basic Vue project. The project involves integrating a Google Map using the vue2-google-maps package. Additionally, I have a JSON file (or data.php) containing the following information: { "locations": [ { "nam ...

Adding a script to the head of a Next.js page by using the Script component

I need assistance with inserting tracking code from Zoho application into the Head section of each page in my Next.js application. I am currently using a _document.tsx file and following the instructions provided by Next.js regarding the use of the Next.js ...

Angular 7 router navigate encountering a matching issue

I created a router module with the following configuration: RouterModule.forRoot([ {path: 'general', component: MapComponent}, {path: 'general/:id', component: MapComponent}, {path: '', component: LoginComponent} ]) Sub ...

How to use jQuery to delete specific table rows while keeping the first row safe from removal

Currently, I have a jQuery script that successfully removes table rows when a button is clicked. However, I want to prevent the button from removing the first row of the table. Is there a way to achieve this? $("#remove").click(function(event) { ...

Assistance is required for establishing a connection between php and js. The process begins with executing a sql query to extract the necessary data, which is then encoded into JSON format

I have encountered an issue with a project I am working on solo, involving a sidecart in a PHP file with external links to SQL, CSS, and JS. The problem arose when attempting to insert necessary data into JS using JSON encoding. <?php session_start(); ...

What is causing the Unhandled Promise Rejection error when using await with Promise.all?

This is the general setup of my code: (async () => { try { const asyncTasks = [] for (let i = 0; i < 3; i++) { await new Promise((resolve, reject) => setTimeout(resolve, 1000)) for (let j = 0; j < 3; j++) { async ...

Diverse Browser Outcomes with jQuery CSS

Currently, I am in the process of developing an app that utilizes percentages as offset positions for ease of calculation. For a visual example, you can visit this link: http://jsfiddle.net/WeC9q/1/embedded/result/ Although the zooming feature functions ...

Navigating to redirected URL within jquery's get() function

When I tried sending a get request to a Google App Script URL in my application using JQuery's get method, everything was working fine. However, out of the blue, that API started redirecting to a different URL in case of an authentication error. As a ...

``Please note that the Sinon spy.called method is currently not

Context In my setup, a small server receives data from a machine. Each time a message is received, a function in a dispatcher object is called, which simply logs everything it receives to the console. Issue While I can see the logs in the console, Sinon ...

Tips on implementing a jQuery .load() function using an anchor tag within dynamic content

I am working on a search page where user input is taken from a form and then sent to a PHP file that makes a cURL call to an external server. The PHP file receives an array from the server, which it uses to display HTML in a "results" div on the original s ...

Compel a customer to invoke a particular function

Is there a way to ensure that the build method is always called by the client at the end of the command chain? const foo = new Foo(); foo.bar().a() // I need to guarantee that the `build` method is invoked. Check out the following code snippet: interface ...

Automate populating input fields with data

I need help with a form that has four input boxes. Is it possible to automatically fill the remaining three input boxes with the value entered in the first box when the user clicks a button using JavaScript? Or should I aim to prefill the textboxes with ...

Streamline uploading files with AngularJS using Selenium

I am utilizing Powershell to operate .NET Selenium with a FirefoxDriver in order to automate certain tasks. One of these tasks involves file uploads, and the website I am working with appears to have been built using AngularJS. After some experimentation, ...

Are there equivalent npm variables like (`npm_config_`) available in yarn console scripts?

Utilizing variables in custom npm commands is possible (example taken from ): { "scripts": { "demo": "echo \"Hello $npm_config_first $npm_config_last\"" } } Can this functionality also be achieved ...

Detect the size changes of a React DOM node using hooks

Is it possible to measure a React DOM node during the window resize event? I followed the example provided in the React hooks-faq, but it seems to only work for the initial render. When I tried adding a useEffect to listen for the resize event, the callb ...

Encountered an error with AngularJS $http.post - Unexpected token F

I've encountered an issue while running my $http.post script and have been searching for a solution without success. Below is the error that appears when I try to run the webpage: XHR finished loading: POST "http://mypage/services/json/DownTimeStartB ...

Odd behavior observed when clicking on the link

On the initial click with an anchor tag, I am experiencing different behavior compared to subsequent clicks. When the href value is set to "", no HTTP GET request is made on the first click. I cannot determine why the first click would behave differently t ...

What is causing the 'Invalid Hook Call' error to appear in React?

I have recently started learning React and I am currently working on converting a functional component into a class component. However, I encountered an error message that says: Error: Invalid hook call. Hooks can only be called inside of the body of a fu ...

Exploring Objects without the need for loops

Currently, I am focusing on optimizing the performance of the following objects: var scheduleFee = { poor = {level1:25,level2:25,level3:25} , good = {level1:15,level2:20,level3:25} , vgood = {level1:10,le ...