Upgrade scenes in ThreeJS by implementing cross fading between scenes from version 101 to 107

Discovering a helpful example by Fernando Serrano on how to smoothly transition between 2 scenes in ThreeJS was quite enlightening. I also stumbled upon this modified JSFiddle version using ThreeJS 101, which works well but faced an issue...

Following the upgrade to the latest version of ThreeJS (107), changes were made to the WebGLRenderer. The removal of renderTarget and forceClear arguments from its render function posed a challenge. While attempting to update my JSFiddle, everything seems to function correctly, yet numerous errors are appearing in the console!

The root of the problem remains elusive. Could it be the order or configuration of setting the render target and clearing the renderer? Is it permissible to use the same renderer for multiple render targets?

Any insight into what might be going wrong would be greatly appreciated!

javascriptthree.js

Answer №1

I'm struggling to identify the root of the issue. Is there a specific order or importance in setting the render target and clearing the renderer?

Absolutely, it is crucial. Consider the WebGLRenderer as a state machine. First, you need to specify whether to utilize a render target using .setRenderTarget() before proceeding with any optional clear and rendering steps.

At line 103, where 

renderer.setRenderTarget(this.fbo)
is set, it should actually be renderer.setRenderTarget(null). For reference, you can refer to the official example for proper code implementation. I have adjusted the solution based on that example.

Is it possible to use the same renderer for multiple render targets?

Yes, you can do so without encountering any issues.

Updated fiddle: https://jsfiddle.net/3b498ozw/

Using three.js version R107

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 a vertical slider adjacent to an HTML element on either the left or right side

I'm struggling to bind a range slider to the left or right side of a canvas that displays video. Despite my efforts, CSS seems to be putting up a strong fight. I can handle issues like stretching and slider values, but attaching it to the canvas is pr ...

javascripthtmlcsshtml5-canvasrange

Event handler or callback function in Socialite.js

Exploring the capabilities of Socialite.js for the first time has been quite intriguing. This JavaScript plugin allows loading social media plugins after page load, adding an interesting dynamic to website interactivity. However, I am faced with the challe ...

javascriptjquery

What is the best way to connect these functions in a sequence using promises?

A new software has been developed to extract data from an online t-shirt store and then organize the product information into a CSV file. The software consists of 3 scraping functions and 1 function for writing the data. I'm currently facing challen ...

javascriptnode.jsrequestpromise

What are some ways to create a div section within a Google Map interface?

Is there a way to create a div area within the Google map iframe? Some of my code is already prepared here (). The image in this link (https://i.sstatic.net/92gkt.png) illustrates exactly what I'm trying to achieve. ...

javascripthtmlcss

Only line breaks are permitted in Mustache.js, all other HTML characters are escaped

After a user submits input, I am generating comments and displaying them using Mustache.js. When it comes to rendering the comments, I have found that replacing user-entered line breaks (\n) with <br/> allows them to display as HTML breaks. To ...

javascriptmustache

What is the best approach to animating a specified quantity of divs with CSS and javascript?

How neat is this code snippet: <div class="container"> <div class="box fade-in one"> look at me fade in </div> <div class="box fade-in two"> Oh hi! i can fade too! </div> <div class="box fade-in three"& ...

javascriptcss

Learn how to use Javascript and ASP.NET to refresh the parent page in Mozilla Firefox browser

The code window.opener.location.reload(); works well in Internet Explorer, but it doesn't refresh the parent page in Mozilla Firefox. Can someone please advise me on how to refresh the parent page in a way that is cross-browser compatible? Here is th ...

javascriptasp.netfirefoxcross-browserrefresh

What is the best way to insert an anchor tag into text using React?

I am working with a variable const linkElement = `Hey this is a link ${<a href="www.google.com">Click me!</a>} that can be clicked}` Currently, it displays as Hey this is a link [Object object] that can be clicked. Is there a way to ...

javascripthtmlreactjs

Sorry, the provided text is already unique as it is an error message

I'm currently using the react-highlight-words package to highlight text inputted into a textbox After checking out the react-highlight-words documentation, I noticed that they are using searchWords as an array. https://www.npmjs.com/package/react-high ...

javascripthtmlreactjsreduxmaterial-ui

The functionality of changing the category in the second carousel slider on click using JavaScript appears to

Creating a bootstrap carousel slider that dynamically changes based on the selected category. For example, clicking on the hammer category will display only hammer images, while selecting the compass category will show compass images. Everything worked sm ...

javascripthtmlbootstrap-5

What steps do I need to follow to write this function in TypeScript?

I am encountering a problem when building the project where it shows errors in 2 functions. Can someone please assist me? The first error message is as follows: Argument of type 'IFilmCard[] | undefined' is not assignable to parameter of type &a ...

javascripttypescriptnext.js

Enhance Your HTML Skills: Amplifying Table Display with Images

Recently, I utilized HTML to design a table. The Table Facts : In the first row, I included an appealing image. The second row contains several pieces of content. In continuation, I added a third row. The contents in this row are extensive, resulting i ...

javascriptjqueryhtml

Unable to removeClass and addClass as expected

Each time I click on a div, it gets encased in a black line. However, my goal is for the previously selected div to lose the black outline whenever I click on a different div. Only the current div should have the border. Below is the code snippet that I a ...

javascriptjqueryhtml

Guide to creating a dictionary array on-the-fly:

I have been working on updating years to make it more dynamic by using the starting year (2010) and ending year (2018). Originally, I used a for loop to address this, but I am curious if there is a more efficient way to refactor years. Current arrangemen ...

javascriptarraysreactjs

Changing the size of an image in an HTML5 canvas

I have been attempting to generate a thumbnail image on the client side using Javascript and a canvas element. However, when I reduce the size of the image, it appears distorted. It seems as though the resizing is being done with 'Nearest Neighbor&apo ...

javascripthtmlcanvasimage-resizing

Conflict between iOS 7+ swipe back gesture and stateChange animations

When transitioning between states in an AngularJS application, I utilize CSS animations to add visual appeal to the view change. This may involve applying fades or transforms using classes like .ng-enter and .ng-leave. In iOS 7+, users can swipe their fin ...

javascriptjqueryioscssangularjs

After implementing AXIOS, don't forget to refresh the static content in VUE

I'm encountering some issues with Vue.js: Currently, I have a list of elements that I'm iterating through using v-for in my script. This array is retrieved from Axios (API) in the created() lifecycle hook. Additionally, I have a static variable ...

javascriptvue.jsvue-componentaxios

Obtain the native element of a React child component passed through props, along with its dimensions including height and width

Is there a way in React to access the native HTML element or retrieve the boundaries of an element passed as a child in props? Consider the following component: class SomeComp extends Component { componentDidMount() { this.props.children.forEa ...

javascriptreactjs

Determining the total of input values based on identification number

Can anyone help me figure out how to calculate the total sum of the values entered using IDs? I've been struggling with it and can't seem to get it to work. Your assistance would be greatly appreciated. <input type="number" id=&quo ...

javascripthtmljquerycss

How to transform multi-dimensional arrays to JSON format using JavaScript (and maybe jQuery)

Currently facing a Javascript dilemma where data storage is essential in the following format: MainArray(Array(JavaScript Object, JavaScript Object, etc etc..), Array(JavaScript Object, JavaScript Object, etc etc..), etc etc..) The main array consists of ...

javascriptjqueryjson