Tips for properly arranging the sequence of solid items in orthographic visualization

When using THREE.js and an off-axis OrthographicCamera to view a grid of cubes, I have noticed that once the camera rotates enough for the objects to overlap, the rendering order seems to be based on creation order rather than spatial position.

Even after attempting to adjust settings with 

THREE.WebGLRenderer( { antialias: true, sortObjects: false } );
, the issue persists.

To see this strange Escher-like effect in action, check out this animated fiddle: http://jsfiddle.net/rfbvdmxn/2/

Before the objects start overlapping, the scene looks like this: https://i.sstatic.net/y2LMQ.png

As the camera continues rotating and the objects start to overlap, you can observe that the objects further away end up obscuring those closer to the camera:

https://i.sstatic.net/S5rsQ.png

If you have any insights into what might be causing this issue or how it can be resolved, please let me know!

javascriptthree.jsorthographicocclusion

Answer №1

The issue here lies in mixing up the constructor parameters top and bottom when creating an instance of OrthographicCamera. By adjusting the values accordingly, the sorting appears to be functioning correctly now. Additionally, using the MeshNormalMaterial has resulted in a more accurate visual display.

var camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -1000, 2000);

Check out the demo: http://jsfiddle.net/rfbvdmxn/42/

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

Nuxt.js is throwing a TypeError because it is unable to access the 'minify' property since it is undefined

When I try to generate a Nuxt app using "npm run generate" or "npm run build", I encounter an issue where it throws a TypeError: Cannot read property 'minify' of undefined. Does anyone know how to solve this? TypeError: Cannot read property &apo ...

javascriptvue.jsnuxt.js

The duplication of the Javascript code is creating a conflict within the slider functionality

Attempting to create both an image slider and text slider on the same page using the same JavaScript is proving to be a challenge. Despite researching and trying to implement a no-conflict solution, the sliders still do not function properly together. Wh ...

javascriptjquery

Dynamic loading can be followed by compiling the less file

For each component on my website, I have a separate LESS file where I import the necessary styles and controls. My goal is to compile the LESS file after it has been loaded. Here is an example of how the HTML code looks: <link rel="stylesheet/less ...

javascriptjquerycssless

Populating a clickable list and form with a complex JavaScript object

I have a code snippet that takes an unstructured String and parses it into a JavaScript object. My next step is to integrate it into a web form. You can check out the demo here. The demo displays the structured object hierarchy and showcases an example of ...

javascriptjqueryjsonforms

Angular2 - Implementing Form Validation for Dynamically Generated Input Fields Based on Conditions

My goal is to create a basic form that allows users to select between two options: Local and Foreigner. If the user does not make a selection, the form should be marked as invalid. Choosing Local will make the form valid, while selecting Foreigner will rev ...

javascriptangularjsformsvalidationangular

What is the best approach for scaling @material-ui Skeleton in a grid row with variable heights?

I am working on creating a grid of Avatar images with a transition state where I want to show a skeleton representation of the image. To achieve this, I am using @material-ui/lab/Skeleton. The issue I'm facing is that since my images are set to autos ...

javascripthtmlcssreactjsmaterial-ui

Incorporate additional libraries like jQuery into your Vue.js application

I am facing an issue with connecting a third-party js library to a vue.js component main.js ... require('jquery') import Vue from 'vue' import VueMdl from 'vue-mdl' import App from './App' import Auth from './ ...

javascriptwebpackvue.js

What is the best way to extract numerical data from the second object in a JSON file?

How can I retrieve the data from the second object's tts number (1,152.81) and display it correctly? I attempted to use priceTag.innerHTML = data[0].tts in my javascript file below, but it doesn't seem to be working as expected. Can you help me ...

javascriptjsonnumbers

Executing the executeScript method in Microsoft Edge using Java and WebDriverWould you like a different version?

I'm currently attempting to execute the following code in Microsoft Edge using WebDriver ExpectedCondition<Boolean> jsLoad = driver -> ((JavascriptExecutor) driver).executeScript("return document.readyState").toString().equals(&quo ...

javascriptseleniumselenium-webdriverwebdriverexecute-script

Difficulty with parsing JSON in JavaScript and retrieving values by key

I'm encountering an error response within the ajax error function; $.ajax(Request).error(function (Response) { var content = JSON.stringify(Response.responseText); var obj = JSON.parse(content); console.log("Response.r ...

javascriptjsonajax

Interacting div elements with jQuery's dynamic content

I am searching for a way to populate a div with content based on my click selection. To begin, I create a dynamic table like the one below: user name total hours worked button(unique id fetched from database) user name total ho ...

javascriptjqueryajaxcodeigniter

Consider yourself a module for npm, just like a node

I'm currently working on a Javascript project that has been released as a node module. In some parts of the source code, I have used relative paths to import other files within the project: // <this_module_path>/action/foo.js import execution f ...

javascriptnpm

The member's voiceChannel is undefined

I've encountered an issue with my discord bot not being able to determine which channel a user is in. When I check member.voiceChannel, it always returns undefined, even when I am currently in a voice channel. Here is the code snippet that illustrate ...

javascriptnode.jsbotsdiscorddiscord.js

What is the process for selectively adding interceptors to app.module?

After searching through various topics, I have not found a solution that addresses my specific issue. To provide some context, we have an Angular App that operates in two modes - one mode uses one API while the other mode utilizes a different API. My goal ...

javascriptangularangular-httpclient-interceptors

What is a different way to rearrange items within an Angular Controller without relying on orderBy in the HTML?

http://plnkr.co/edit/apwAQG9tczOUckbc9bya?p=preview https://i.sstatic.net/NcNYh.png Seeking to rearrange li elements in the plnkr above without using ng-repeat | orderBy:predicate:reverse syntax in the markup. The challenge is that new items are dynamic ...

javascriptangularjssortingangularjs-ng-repeat

Executing a function from another module (File) within a React JS application

I am currently utilizing the Material UI v1.0.0-beta.33 in my project, which includes an App Bar component. import React from "react"; import PropTypes from "prop-types"; import { withStyles } from "material-ui/styles"; import AppBar from "material-ui/App ...

javascriptreactjsmaterial-ui

Unexpected Results from WordPress Ajax Request

Currently, I am utilizing the snippets plugin in conjunction with Elementor. To implement an ajax function as a snippet, I have set it up like so: add_action( 'wp_ajax_get_slug_from_id', 'get_slug_from_id' ); add_action( 'wp_ajax_n ...

javascriptphpjqueryajaxwordpress

The `await` keyword can only be used within an `async` function in

I attempted to create a music bot for my server, but it seems like I made a mistake. I followed instructions from this video, however, an error stating await is only valid in async function keeps popping up. module.exports = (msg) => { const ytdl ...

javascriptnode.jsdiscord.js

Mixing success and error states can lead to confusion when using jQuery and Express together

I've been struggling with a simple question that's been on my mind for quite some time. Despite my searches, I haven't found a similar query, so I apologize if it seems too basic or repetitive. The scenario involves an API route (Express-ba ...

javascriptjquerynode.jsajaxexpress

"Enhance Your Search Input with Dynamic Suggestions from JSON Data Integrated with

Hello! I am looking to create an autosuggest feature using a PHP file that returns a JSON Object. I then parse it in JavaScript to generate a link with the correct ID (refer to the provided JSON data). JSON data from search_new.php: {"Data":{"Recipes":{ ...

phpjavascriptjqueryhtmljson