Using three.js to render a cubemap with the setting renderer.autoclear set to false

Rendering two scenes separately and overlaying them requires setting renderer.autoClear to false. Inside the rendering loop, using renderer.clear() works perfectly:

// This works fine!
renderer.clear();
renderer.render( bgScene, bgCamera )
renderer.clearDepth();
renderer.render( scene, camera );

However, adding a cubecamera to the scene for a reflective object causes issues when renderer.autoClear is set to false. This results in the texture of the reflective object not clearing when the surroundings change, leading to a "painting" effect:

// Causes "painting" effect
cubeCamera.updateCubeMap( renderer, scene );

A simplified fiddle demonstrating the issue is provided in the link below. The two scenes are omitted for simplicity. If this issue is a bug in the library, it will be reported in the repository.

https://jsfiddle.net/pqoz74rf/4/

javascriptthree.jsrenderer

Answer №1

A solution was found by the talented WestLangley on GitHub. It was discovered that auto clear must be enabled when updating the cubemap, but can be disabled for other parts of the rendering process.

renderer.autoClear = true;
cubeCamera.updateCubeMap( renderer, scene );

renderer.render( bgScene, bgCamera )
renderer.autoClear = false;

renderer.clearDepth();
renderer.render( scene, camera );

Check out the updated code on this fiddle: https://jsfiddle.net/pqoz74rf/6/

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

Issues with the play() method in Javascript across Firefox, Safari, and IE 11 are causing functionality problems

I developed a basic video and audio player that smoothly fades out an introductory image and starts or stops playing an mp4 file upon click. Everything functions properly in Chrome, but unfortunately does not work in other major browsers. Despite checking ...

javascriptjqueryhtmlcss

Creating a Build System for JavaScript in Sublime Text

While working on developing an application using node.js, I decided to create a JavaScript build system in Sublime Text 3 on my Ubuntu OS. I made a new build system file named nodey.sublime-build with the following contents: { "cmd": ["node","$file"," ...

javascriptnode.jssublimetext2sublimetext3sublimetext

An error occurred in Node.js while parsing data: Headers cannot be set after they have already been sent to the client

I am currently using a CSV parser to read data from a CSV file. I then pass this data in object format to an EJS template file for printing. However, when I try to stringify the data, I encounter an error. The error message is as follows: Error [ERR_HTTP_ ...

javascriptnode.jsexpressnode-csv-parse

What are some methods for utilizing the data received through this.props.history?

Whenever I need to navigate from one route to another using this.props.history.push("/"), I also want to pass along some extra data. For example: this.props.history.push('/postDetail', {data: item}). However, I am uncertain about where to define ...

javascriptreactjsreduxreact-reduxreact-router-dom

What is the process for displaying images fetched from the API?

Currently, my front-end is built using React/Redux and the API side with AdonisJS. All of my images are stored within the API, and I need to find a way to display them on the front-end. Can anyone provide guidance on accomplishing this task? ...

javascriptnode.jsimagereact-redux

JQuery .click Event doesn't center elements even with transform-origin adjustment

In the JSfiddle provided below, you can see that after a click event occurs, two span (block) elements rotate 45deg to form an "X". However, both elements are slightly shifted left, creating an off-center "X" relative to the parent's true center-origi ...

javascriptjquerycsscenter

Enhance headers with authLink in react-apollo post-authorization

Utilizing the Github Graphql API has been quite a journey for me. Upon the initial load of my application, I direct the user to fetch an access_token. The process works smoothly, however, since the app has already loaded, I face the challenge of updating ...

javascriptreactjsgithub-apireact-apollo

Deploying an Angular 2 application using SystemJS and Gulp can sometimes feel cumbersome due to its

Although I have experience developing with Angular, I recently started working with Angular 2. After completing the quickstarter tutorial, I attempted to deploy the finished application on a server in production mode. My lack of experience with SystemJS a ...

javascriptangulargulpsystemjs

Avoiding redundant EventEmitters when transferring @Output to a child component

While working on a form component, I decided to separate the form action buttons into a child component. This led me to create two EventEmitter and handlers for the same action. I'm wondering if there is a way to directly pass the 'onDiscard&apo ...

javascriptangulartypescript

Add to and subsequently remove the possibility of deleting that element

I encountered an issue while moving elements from one div (x) to another div (y). The problem is that the elements in div x are deletable, but once they are copied to div y, they cannot be deleted. Here is the initial state: https://i.sstatic.net/4yQ6U.pn ...

javascriptjqueryhtmlcss

Having issues with Node.js POST requests not functioning properly

Currently diving into learning the MEAN stack and facing a challenge with executing POST requests on the server. Here is a snippet from my server.js script: var express = require('express'); var bodyParser = require('body-parser'); v ...

javascriptnode.jspostcurlexpress

Activate the search function once the user has finished entering text

Currently facing the following issue: Within my JavaScript file, I have the below code snippet, termChange(evt) { this.rows = []; this.searchTerm = evt.target.value; this.getCases(); } This section of code clears out the ...

javascripteventsevent-handlingsalesforcesalesforce-lightning

Invoking a function within an HTML file does not result in triggering an alert message

Hello everyone, thank you for taking the time to look at this. I'm attempting to execute a javascript function when I click on the update button. Here is the javascript code: var text2Array = function() { // This function takes the value from the t ...

javascripthtml

Use Material UI Grid to create a horizontal line design instead of focusing on making the

Is there a way to turn off responsiveness for the material UI grid similar to how it can be done with a basic HTML table? While an HTML table scales down and adds a horizontal scroll bar, the material UI grid remains responsive as shown in the example belo ...

javascriptreactjsmaterial-ui

Making a Connection with Ajax in Django: Adding Friends

I have been exploring the capabilities of Django-Friends My goal is to make it so that when a user clicks on the add friend button, it either disappears or changes to say "Request sent". However, I am encountering an issue where the button does not disapp ...

javascriptjquerypythonajaxdjango

Incorporate HTML into a webpage using JavaScript along with variables

So, I need to dynamically add and remove content to an HTML page with complex styling and data sets that will change based on the clicked element. An example scenario could be like this... <li class="foo"> <div class="slider" data-one="foo" d ...

javascriptjqueryhtmlperformancenested

Having trouble initiating an AJAX call in Django and returning values to my form

Seeking assistance to run an AJAX call for a quick calculation in my django view and display the result within a span tag on my HTML page. New to Javascript, struggling with triggering my AJAX call. Below is my HTML and JS code: <input type="text" nam ...

javascripthtmldjangoajax

Incorporate dynamic error messages with accompanying icons into a single jQuery dialog box

I've set up a global jQuery dialog to showcase all error messages within the application. I've successfully linked the error message to the dialog, but I'm facing issues with displaying the icon alongside it. To keep it simple, I've use ...

javascriptjqueryjquery-uidialog

Success message displayed for Ajax form submission, yet email delivery remains pending

In my PHP code for sending emails, I have a function called "Send to friend" that works perfectly with standard PHP post. This confirms that the sendtomail.php file is functioning correctly as well. /* AJAX Code for Send to Friend */ $(function() { $(&ap ...

phpjavascriptajaxsubmit

Animate my banner images only after they have fully loaded using Jquery

I recently came across a banner image slideshow in jQuery, but it seems to be animating even before the images are fully loaded. This results in the slideshow displaying image descriptions without the actual images themselves. Can anyone help me modify th ...

javascriptjquery