Is there a way to refresh the screen and remove the previously drawn object?

I am currently working on implementing the boids algorithm with three.js, and I've hit a roadblock when it comes to drawing the birds (or cubes in my case).

The issue I'm facing is that the screen is not clearing after redrawing, so the old cubes remain visible.

Below is the code snippet I'm using:

 // Code snippet here 

I've tried multiple solutions but can't seem to find one that works. Any help or guidance would be greatly appreciated!

Answer №1

After some experimentation, I came up with a solution: By eliminating the loader.load call in redraw and init, and defining texture and material outside of these functions, I achieved the same result but noticed that it loaded faster on the page. Additionally, I discovered that I was not actually removing the objects I intended to. To address this, I replaced boidDesign.name = "boid"+i; with

boid.name = "boid" + i; boidDesign.name = boid.name;
, which yielded the expected outcome.

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

When trying to run the code locally, JS and Bootstrap seem to have trouble functioning together, despite

Check out my codepen project here: https://codepen.io/ldrumsl/pen/ZxdZwa Below is the JavaScript code: $('#datetimepicker1').datetimepicker(); $('#datetimepicker2').datetimepicker(); Downloaded index.html file content: <!DOCTYPE ...

Utilizing JSON Parsing in JavaScript and jQuery

func({ "query": { "count": 1, "created": "2013-05-03T06:20:01Z", "lang": "en-US", "diagnostics": { "publiclyCallable": "true", "cache": { "execution-start-time": "32", "execution-stop-time": "32", "exe ...

Collecting information from websites by changing JavaScript parameters

I am currently attempting to extract intraday prices for a specific company from the website Enel Intraday. The issue I am facing is that when the data is fetched, it is spread across hundreds of pages, making it extremely time-consuming to gather all the ...

Mysterious dual invocation of setState function in React

My component is designed to display a list of todos like: const todosData = [ { id: 1, text: "Take out the trash", completed: true }, { id: 2, text: "Grocery shopping", completed: false }, ]; ...

Encountering an issue while loading an express template that includes a passed variable, resulting in the error message "Cannot set headers after they are

Currently, I am facing an issue with validating a form using express-validator in my Node application. The problem arises when there are validation errors; while no error is displayed in the console if there are no validation issues, attempting to pass the ...

Is it possible to modify the inner text of the body element without changing the surrounding HTML tags?

In my script, I have the following line : var ReplacingScope = document.querySelector( "body" ); let Regexp = new RegExp("fdp", 'gi'); ReplacingScope.innerText = ReplacingScope.innerText.replace( Regexp,"pdf"); While this successfully replaces ...

JavaScript: Can you clarify the value of this variable using five sets of double quotations?

Could you please review the code snippet below for me? <script type="text/javascript"> function recentpostslist(json) { document.write('<ul class="recommended">'); var i; var j; for (i = 0; i < json.feed.entry.length; i++) { ...

Prevent access to the current window using JavaScript for a specified number of seconds

Currently working on a web application that utilizes backboneJs and nodeJS. I am seeking to prompt the user to refrain from closing the current window for a period of 10 seconds before granting them full control. Is it feasible to achieve this using Java ...

Change the background color of form checkboxes in a different way

I'm currently working on a form design and I would like to create a feature where the background color of each option alternates. This is similar to how you can style alternating rows in tables using CSS tr:nth-child(even){background-color: #f2f2f2;} ...

"Encountered an issue while trying to interpret an array using JSON.parse in

The issue I'm facing is with parsing a JSON string to a JSON object in node version 6.0.0. The string that needs to be parsed contains an array of objects. Unfortunately, when using JSON.parse, it fails to convert any type of arrays successfully. Ins ...

Is it appropriate to use a component inside an entry component?

I'm currently working on a component that triggers a function to open a window: @Component({ selector: 'app-deposits', templateUrl: './deposits.component.html', styleUrls: ['./deposits.component.scss&apo ...

Run javascript/jquery code after the template rendering process in Angular 2 is complete

I've attempted both of these techniques - ngAfterViewInit() or ngAfterContentInit() This is the code I used - import { Component, OnInit } from '@angular/core'; import { HomepageService } from '../services/homepage.service'; ...

`How can I dynamically refresh Laravel @includes using AJAX?`

Incorporating a single page application within my larger application has been a challenge. The issue lies in sending data to the database and displaying it on the table without having to refresh the page. Despite implementing AJAX dynamically, the newly in ...

What is the method for displaying a file using a binary string as input?

Is there a way to display a PDF file from a binary string on a web browser? I know that for image files, we can use atob() and then <img src="data:image/png;base64,... But what about PDF files? Is there an equivalent method or syntax like ReadItAs("cont ...

When incorporating a Textarea element within styled components in ReactJS, it causes the text to be inputted backwards due to the cursor

Currently, I am utilizing the Textarea component from react-textarea-autosize along with using styled from styled components. In a class, I have created a function called renderForm which is responsible for rendering a form containing a StyledTextarea. How ...

Encountered an error while trying to access an undefined property during an Angular Karma

I'm currently working on testing a service function that involves multiple $http.get() calls. The function being tested returns a promise but the test is failing with an error stating response is undefined. Below is the test script: it('should ...

Deciphering the Cause of mapStateToPropsCall in Redux and React

When handling an unsuccessful http call resulting in an error message being displayed, I encounter subsequent state changes triggering multiple render calls. Is there a technique to identify the cause of these state changes and mapStateToProps calls? Alter ...

Switching hamburger menu icons in Vue.js

I am trying to change a hamburger menu icon in my header to a cross icon when it is clicked. I have created a function in the computed property of my Vue template, but I'm not entirely sure about the implementation. How can I achieve this? Below is t ...

What is the most efficient way to add a new object to an array in JavaScript by searching for a specific object in a separate array and returning a distinct object

Looking to merge two JavaScript object arrays similar to a vlookup function in Excel. The goal is to match objects from one array with another, and then combine them into a single array for streamlined access. For instance, let array1 = [ {&qu ...

Obtain real-time width and collapse a menu

I've been struggling with a menu collapse code for the past two days. No matter how hard I try, I can't seem to figure out what I'm doing wrong. The challenge with this code is that it stops working when you resize the browser. If anyone c ...