Is the order of rendering in ThreeJs dependent on the order in which objects are created?

I'm currently facing an issue related to the render order within my scene. All objects in the scene have transparency, and there are multiple child objects for each main object.

The scenarios below all use the same dataset:

Option 1 is functioning correctly, however, I need option 2 to work as the application user should not be required to manually input data into the system.

  1. If I manually add a set of objects in a specific order, they render properly.
  2. When I load all objects together and then add them to the scene in a particular order, the render sequence is incorrect. I assumed that they would be rendered based on the order added to the scene, which should yield the same outcome as option 1.
  3. Loading all objects and hardcoding the render order results in an incorrect sequence due to differences in depth among the child objects in the scene.

I'm puzzled as to why option 1 and option 2 produce different outcomes. Ideally, I'd like to avoid resorting to option 3.

Could there be factors beyond just the order of objects added to the scene influencing the render order?

Here are two videos for reference:

Render Order Done Right

Incorrectly Ordered Renders

Answer №1

If you're unsure about the order in which objects will be added to the scene, you can manually set the render order using the Object.renderOrder property. Typically, you'd want background objects to render first, but this may cause issues if the camera is facing the opposite direction.

In cases where all objects have transparency, consider disabling depthTest so that objects ignore the depthMap when being rendered.

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

The Scribd page function is experiencing technical difficulties and is currently not functioning as

I recently added the Scribd document viewer to my website, but I am encountering an issue with the setPage function not working properly. Could someone assist me in setting it up to only display the first 2 pages of the document? Please take a look at the ...

Customizing the appearance and dimensions of JWPlayer Audio Player with percentage-based styling

I'm currently attempting to set up an audio embed using JWPlayer, following the instructions provided in this particular article. The article suggests setting it up with the following code: <div id="myElement">Loading the player...</div> ...

When trying to append data to a datatable, I encountered an error: Uncaught SyntaxError: missing ) after argument

$("#searchresult").append("<tr><td id=''>" + data[i].landarp + "</td>" + "<td id=''>" + data[i].landarp + "</td>" + "<td id=''>" + data[i].landpin + "</td>" + "<td id=''&g ...

The data set in a setTimeout is not causing the Angular4 view to update as expected

I am currently working on updating a progress bar while importing data. To achieve this, I have implemented a delay of one second for each record during the import process. Although this may not be the most efficient method, it serves its purpose since thi ...

Javascript navigation menu failing to accurately display all pages

As I continue to enhance my website at , I have encountered an issue with the menu functionality. The menu is dynamically generated through JavaScript, scanning a folder for pages and populating them into an array. While this system functions smoothly ove ...

Angular 11 - New Script Inserted into scripts Directory and Linked in angular.json Configuration

I just added a new script file in the src/assets/scripts directory and updated its path in the scripts section of angular.json. My question is: Will I need to restart ng serve for the changes to take effect the next time the application is run? Thank you ...

Setting up Webpack for my typescript React project using Webpack Version 4.39.2

I have been given the task of fixing the Webpack build in a project that I am currently working on. Despite not being an expert in Webpack, I am facing difficulties trying to make it work. The project has an unconventional react frontend with typescript. I ...

Is there a specific plugin that enables dynamic calculations within a django formset?

Looking for a solution: Is there a jQuery plugin available that can perform calculations for a Django formset? The form is dynamic, changing the ID of each field per row whenever the add button is clicked. ...

When deciding between .attribute=, setAttribute, and attr(), which is the best option to use?

.attribute in Javascript let friendDiv = document.getElementById("friend"); friendDiv.className = "list"; VS setAttribute in Javascript let friendDiv = document.getElementById("friend"); friendDiv.setAttribute("class","list"); VS .attr in Jquery $(" ...

Create names for links using jQuery based on the data received from an AJAX response

I am currently utilizing the jQuery UI tooltip script available at this link. As a result, I have tooltip links with varying "data-id" attributes like so: <a tooltip-link data-id="12555"></a> <a tooltip-link data-id="38"& ...

Angular - Implementing Opacity Inheritance for Child Components

Is there a way to prevent Angular Child components from inheriting their parent's styles, specifically opacity? I have a form wrapper positioned on top of the page as shown below: import {Component, EventEmitter, Output} from "@angular/core" ...

Jest identifies an open handle when working with an Express application

For quite some time now, I've been grappling with a particular issue. It all started when I was conducting basic integration tests using a MongoDB database. However, I've minimized the code to its simplest form. The only thing left running is a s ...

Personalize JSON Reporter to Display Captured Information - WebdriverIO

I'm currently in the process of scraping data from an android app using WDIO and APPIUM. After successfully storing the scraped data in an array, I now aim to automatically output this array data to a .json file, rather than manually copying and pasti ...

Is there a way to implement Twitter Bootstrap Dropdowns with the first item acting as a toggle button?

Have you seen the Twitter Bootstrap Dropdowns Docs? They provide the syntax for creating a dropdown menu like this: <div class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a> <ul cla ...

The server encountered an unexpected error while processing the request, possibly due to a

My JavaScript file includes an interval function that calls the following code: setInterval(function() { $.getJSON('/home/trackUnreadMsgs', function(result) { $.each(result, function(i, field) { var temp = "#messby" + result[i].from; ...

No traces of SOI could be detected in the stored canvas image

I have a unique project using Three.js, where I am enabling users to save diagrams they draw on a canvas as JPEG images. The process involves: <a id="download" download="PathPlanner.jpg">Download as image</a> function download() { var dt = ca ...

Use the find() method in Vue.js to locate and correct this value

console.log(this.tiles.find(this.findStart)) When using the following code snippet: findStart: function (value) { var x = 5, y = 10; return value.x === x && value.y === y }, The expected results are returned. However, when su ...

Passing an array of integer arrays to a controller method in ASP MVC using Ajax

I am encountering an issue with my AJAX call when trying to post data entered by the user on the webpage to a controller method. Unfortunately, the data never reaches the controller and always results in an error. I suspect that the problem lies in the typ ...

Splitting arrays in JavaScript

Hi, I have a quick question that I need help with. There's a JavaScript array that I'm working with which looks like this: var myArray = [1, 3, 4, 5, 6, 7]; Now, I am looking to transform this array into the following format: var newArra ...

Tips for altering symbol hues in Angular 4 pipelines

Can the color of the Angular 4 pipes symbol be customized? I am looking to change the dollar symbol to a lighter color, for instance. Link to Image The price shown is formatted using the currency pipe: currency:'USD':'symbol-narrow': ...