Three.js rendering malfunctioning after updating renderer

Update: Revised the question for a broader context. (Original here for reference)

In my project, I am using Three.js WebGLRenderer to render a scene. I need to replace the existing renderer with a new WebGLRenderer by swapping out the canvas and then re-render the same scene in the new renderer.

The process basically involves:

cancelAnimationFrame(this.requestID_);
// all other Three.js objects remain the same (with a new canvas being created by Three.js)
this.createNewRenderer();
this.animate();

The issue I'm facing is that the new renderer only displays an empty background without the scene's meshes. However, if I replace the meshes with freshly calculated ones, the rendering works as intended.

Based on this observation, I suspect the problem lies with the meshes themselves.

I have attempted to solve this by setting the geometry.xxxNeedUpdate and material.needUpdate flags as mentioned in this three.js documentation before and after creating the new renderer. Unfortunately, this approach hasn't resolved the issue either.

What steps can I take to ensure that the meshes are refreshed and displayed correctly in a new WebGLRenderer?

javascriptthree.js

Answer №1

My current solution involves refreshing each mesh in the scene by performing the following steps:

mesh.geometry = mesh.geometry.clone();
mesh.material = mesh.material.clone();
newMesh = mesh.clone();

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

What is the best way to transmit a response from PHP to Ajax?

A JavaScript function is used here that utilizes the POST method to send form data to PHP. The PHP script then checks this data in a database to verify its authenticity. However, there seems to be confusion on how to convey the response from PHP back to Ja ...

javascriptphpjqueryhtmlajax

Interceptors in axios do not trigger when making requests through a PHP proxy

I am currently working on a React app that will be interacting with services hosted on a remote server. During development on my local machine using the react-scripts server at localhost:3000, I disable CORS in the browser and have no issues with axios f ...

javascriptphpreactjsproxyaxios

Rotating a point in space to align with a designated plane

In my system, one axis moves within the range of [0 -> 2PI], creating an angled plane. See the movement of the axis here. The yellow plane is my target plane. I have the normal vector and constant of this plane. To calculate the XYZ position on the yel ...

maththree.jsrotation

Creating dropdown menus dynamically and populating them based on the selection made in one dropdown menu to determine the options available

Looking to enhance the filtering options in my ngGrid, I stumbled upon the concept of Filtering in Ignite UI grid and was impressed by its functionality. I am now attempting to implement a similar feature in AngularJS. Breaking down the task into 4 compon ...

javascriptjqueryangularjsdrop-down-menu

Implementing 'Load more...' in Rails for infinite scrolling instead of traditional pagination

I currently have a collection of items and have been utilizing the will_paginate gem. However, I am interested in implementing a "load more..." feature at the end of the list. Is there a straightforward way to achieve this with will_paginate, or should I e ...

javascriptruby-on-railsajax

The second jQueryUI datepicker instance flickers and vanishes when the show() function is triggered

I currently have two jQueryUI datepickers integrated into my webpage. The initialization code for both is as follows: jQuery("#departureDate").datepicker({ beforeShow: function() { getDatesForCalendar("outbound"); }, numberOfMonths: 3 ...

javascriptjqueryjquery-uijquery-ui-datepicker

Changing HTML elements dynamically within an ng-repeat using AngularJS directives

I have devised an angular directive where I execute an ng-repeat. The fundamental purpose of this directive is to interchange itself with a distinct directive that depends on a value forwarded into the original directive: <content-type-directive type=" ...

javascripthtmlangularjsangularjs-directive

Verify whether a document retrieved from mongoDB contains a certain property

Dealing with user accounts in Mongoose, I have set it up so that the user can use their phone number to sign in: const account = await db.Account.findOne({ phone: req.body.phone }) : Now, I need to confirm if there is a property named verified in the acco ...

javascriptnode.jsmongodbmongoose

Delete the content on a webpage using an Ajax jQuery request to transfer it elsewhere

Whenever I submit a form using an ajax post request, I receive values from the controller and manipulate the page based on those values. However, my issue is that I need to erase the values from the previous request when the form is submitted again. For in ...

javascriptjqueryajaxpost

Activate the class when clicked

I am facing a minor issue with the JavaScript onClick function. I need a function that will target a specific class, like .modal. Currently, it looks like this <div class="modal" onclick="modalFix()"> <p>here is some text</p> </div> ...

javascriptjqueryhtml

Utilizing jQuery or JavaScript to transfer information within a Bootstrap modal

I am working with a table that is generated from an SQL Table using PHP for data looping. HTML <tbody> <?php $no = 1; foreach($data_request as $data) { ?> <tr> <td class="center"><?php echo $no++.". ";?> ...

javascriptjquerytwitter-bootstrap

Is there a way to verify the react-query queries prior to running them?

Consider this scenario where I have a query to retrieve a list: const list = useQuery('list', fetcher); However, I require a pre-checking function before react-query triggers the execution. Something like this: const appQueryClient = new QueryCl ...

javascriptreactjsreact-query

Enhance User Experience with the Tooltip Feature and Customized

Here is the jQuery code I am using to style my tooltips: $(function() { // select all input fields within #tooltips and attach tooltips to them $("#tooltips :input").tooltip({ // place tooltip on the right edge position: "cen ...

javascriptjqueryhtmlcss

Setting up Laravel with pjax

For the first time, I am experimenting with using pjax in combination with Laravel to enhance page loading speed. Since I am not well-acquainted with this technology yet, I have integrated this package into my project. Everything appears to be functioning ...

javascriptajaxlaravel-5pjax

Iterate over a collection of HTML elements to assign a specific class to one element and a different class to the remaining elements

Forgive me if this is a silly question, but I have a function named selectFace(face); The idea is that when an item is clicked, it should add one class to that item and another class to all the other items. This is what I currently have: HTML <div c ...

javascriptangulartypescript

Creating a scroll bar that overlaps a chart within a div

I am currently working on implementing a button that generates a report by plotting some charts. Initially, these charts are hidden until the button is pressed. I am utilizing Bootstrap for the design, and as a result, the scrollbar is also hidden. Upon cl ...

javascriptjquerycsshighchartsbootstrap-4

JavaScript method not properly sorting the last nested array

I am having trouble with sorting the last nested array using arr[i].sort(). Despite trying various methods such as FOR and WHILE loops along with different operators, I still cannot achieve the desired result. Can someone help me identify what I am doing w ...

javascriptarrayssortingmethods

What is the reason for the new page rendering from the bottom of the screen in React?

Whenever I navigate between pages in my React project, the page always starts at the bottom instead of staying at the top after rendering. I am using router v5 and have been unable to find a solution specifically for this version. I have attempted differe ...

javascriptreactjsreact-router

In node.js, there is no function called file.open for reading files

I'm trying to access a local text file (not through the web) in order to parse it into an array. However, I am encountering an error that says: "file.open is not a function" var app = require('express')(); var http = require('http&apos ...

javascriptnode.jscsv

Issue with scrolling to the bottom of collapsed sections in Bootstrap

I have a bootstrap collapse panel and I've added a toggle link at the bottom to allow users to expand and collapse the content with a click. The Issue My problem arises when the menu expands, causing it to scroll all the way to the bottom of the pag ...

javascriptjqueryhtmlcsstwitter-bootstrap