Everything turns upside down when I switch to orthographic view

After creating a 3D Graph with edges and vertices, I noticed that when I change the view to orthographic, everything is inverted. The edges appear inside the vertices, and I suspect it may be an issue with the normals. However, I'm uncertain if that's the root cause.

In addition, the labels above the vertices are upside down in orthographic view.

Does anyone have any suggestions on how to address this problem?

I am utilizing THREE.js for constructing this graph.

Below you can find the code responsible for camera projections:

var width = options.width || 800,
    height = options.height || 600,
    near = options.near || 0.1,
    far = options.far || 1000,
    cam;
if (options.ortho) {
  var right = width/30,
      top = height/30;
  var left = -right,
      bottom = -top;
  cam = new THREE.OrthographicCamera(left, right, bottom, top, near,
      far);
} else {
  var aspectRatio = width/height,
      fov = options.fov || 75;
  cam = new THREE.PerspectiveCamera(fov, aspectRatio, near, far);
}

Answer №1

Make sure to arrange your parameters correctly when constructing an OrthographicCamera. The correct order should be:

camera = new THREE.OrthographicCamera( left, right, top, bottom, near, far );

This information is applicable for three.js version r.63.

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

Angular 6 elements

I have approximately 100 screens within my application, with 25 of them being search screens. Each search screen shares common elements. For example: @Component:</p> @Component({ selector: 'custom_elem', template: ` Generate html as pe ...

The click event listener declared with v-on inside a Vue Component fails to trigger

I am currently working on a Vue instance for a sidebar within my application that displays a list of menu items. In order to achieve this, I have created a local component with the following template structure: template:'<div><li class="cust ...

Updating the Scale of the Cursor Circle on my Portfolio Site

I attempted to find tutorials on creating a unique circle cursor that can hide the regular mouse cursor as well. After implementing it with a difference blend mode, I encountered an issue where I wanted the scale to change when hovering over a link. The ...

Having trouble extracting HTTP Post data in Node Express?

I am encountering an issue while attempting to send an HTTP POST request from my HTML frontend to a Node.js Express backend. Despite using XMLHttpRequest on the frontend, the server seems to be receiving only an empty object in response. I would greatly ap ...

Adding an element and value to a JavaScript array in IE7

When declaring an array, I can do it like this: var positions = []; Alternatively, I can also declare it like this: var positions = new array(); Both methods are acceptable. Later in the script, I add a value like this: positions[0].top = 0; Everyth ...

Is it possible to display a combination of images and text data using JQUERY/AJAX, when the data is sent as objects or arrays?

I'm struggling to figure out how to handle an object or array sent from a server that contains binary picture and text data using JQUERY/AJAX Here is the server-side setup: const url= require('url'), express = require('express&ap ...

Instructions for redirecting to "http://localhost:4200/shops/shop1/dashboard" following a successful authentication through Auth0 in an Angular

Post-login, Auth0 redirects only to the root URL at http://localhost:4200 instead of http://localhost:4200/shops/shop1/dashboard. The official documentation from Auth0 states: After successful authentication, callbacks will only be made to specific URLs. ...

What is the best way to convert intricate objects into strings and store them in JavaScript?

Is there a way to persist complex object trees in JavaScript, maintaining both the values and function bindings? When using JSON.stringify and JSON.parse, only the values are stored without information on the type of object being persisted. This causes i ...

Tips for submitting data to the identical ejs view or partial following utilizing res.render get?

Is there a way to display data in my EJS file that is posted after the view has been rendered using res.render()? When I try to use <% date %> in my EJS file, it throws an error saying that date is not defined. This makes sense because the value is s ...

The insertMany method in Nodejs does not function properly with the Mongodb ordered option

I have integrated MongoDB into my application, specifically version 4.4.1. I made sure to set the unique option in the word field to true for data integrity. Here is the code snippet I am using: try { const words = [ { word: "her" }, ...

Clear out the existing elements in the array and replace them with fresh values

Within my Progressive Web App, I am utilizing HTTP requests to populate flip cards with responses. The content of the requests relies on the selected values. An issue arises when I choose an item from the dropdown menu. It triggers a request and displays ...

Encountering the 'data is null' error when making a Twitter API request, yet the data is successfully displayed in the browser

I am attempting to show the number of followers for a Twitter account, but when I connect to the API using this code: $.getJSON("https://api.twitter.com/1/users/show.json?screen_name=uswitchTech&include_entities=true", function(data) { console.log ...

Upon submission, the form is processed and 'false' is returned

Does anyone know how I can use ajax to save form data? I am encountering an issue where the page refreshes when all entries are correct. If I input any incorrect data and submit, it displays an error. However, if I then fill in all correct information, it ...

When the inspector is open, Chrome freezes when multiple addModule() calls are made on the audioCtx

I am currently focused on developing a method to load AudioWorklet processors using OfflineAudioContext objects. My goal is to pre-generate and present visual data related to sounds that will eventually be played for the user. My approach involves utilizi ...

I'm having trouble with my .Refine feature when attempting to create a conditional input field. Can anyone help troubleshoot this issue?

I devised a feature in my form that generates additional input fields if the user selects 'yes'. How can I make these input fields mandatory and display a warning message when 'yes' is selected? const FormSchema = z.object({ type: z.e ...

Converting a PHP string into a JSON array

Currently, I am working on making a cURL request and receiving a response that is in the following format when using var_dump: string(595) "{"user_id":1,"currency":"eur","purchase_packs":{"1":{"amount":500,"allowed_payment_methods":["ideal","paypal","visa ...

Showcasing JSON information on an HTML webpage depending on the URL parameters provided

I am attempting to achieve the following using HTML and Javascript exclusively. Once users submit my form, their data is added to a confirmation page in this format: On that page, I aim to display all locations from locations.json with a country matching ...

How is it that changes to the ngOnInit variable don't impact the HTML in Angular 2/4?

I have a user object that I am subscribing to. If the user's name matches a certain value, then a button should not be displayed. I'm not sure why this is not affecting the ngIf in the HTML. Here is my HTML: <input *ngIf="showDelete" type="b ...

Is there a way for me to verify if a number is represented in exponential form?

Is there a way to determine if a number is in exponential form? I encountered a situation in my code where normal integers are being converted to exponential notation when adding or multiplying them. For instance, performing the operation 10000000*1000000 ...

the cached token retrieved by adal is consistently empty

To retrieve a cached token, I am utilizing the react-adal api import { authContext, } from '../auth' const AvatarContainer = () => { getPersonPhoto(authContext) return ( <Avatar /> ) } async function getPersonPhoto(au ...