Variable-sized pixels on a non-uniform plane

My goal is to create a 600x600 pixel plane, but so far I have only been able to achieve an asymmetric plane in black like the one shown in this picture: asymmetric plane

I attempted to switch to a combined camera and use orthographic mode by implementing the following code:

signals.windowResize.add( function () {

    if (camera.inPerspectiveMode) {
        camera.cameraP.aspect = container.dom.offsetWidth / container.dom.offsetHeight;
        camera.cameraP.updateProjectionMatrix();
    }
    else {
        camera.cameraO.left = window.innerWidth / -2;
        camera.cameraO.right = window.innerWidth / 2;
        camera.cameraO.top = window.innerHeight / 2;
        camera.cameraO.bottom = window.innerHeight / -2;
        camera.cameraO.updateProjectionMatrix();
    }

    renderer.setSize(container.dom.offsetWidth, container.dom.offsetHeight);
    render();

} );

Despite my efforts, the issue still persists. I also attempted to adjust the pixelRatio without any success. Do you recommend changing the camera's FOV, aspect, canvas size, or do you have any other solutions? Any input would be greatly appreciated. Thank you, Dan

Answer №1

The issue with the camera aspect was caused by using a perspective camera instead of an orthographic one, perhaps @mr.doob has more insight on this.

Here is the suggested solution:

    signals.windowResize.add( function () {

    if (camera.inPerspectiveMode) {
        camera.cameraP.aspect = container.dom.offsetWidth / container.dom.offsetHeight;
        camera.cameraP.updateProjectionMatrix();
    }
    else {
        camera.cameraP.aspect = container.dom.offsetWidth / container.dom.offsetHeight;
        camera.cameraO.updateProjectionMatrix();
        camera.toOrthographic();

    }

    renderer.setSize(container.dom.offsetWidth, container.dom.offsetHeight);
    render();

} );

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

Converting between GPS degrees and decimal values using jquery, javascript, and PHP: A comprehensive guide

Is there a way to convert GPS degree to decimal values or vice versa? I am working on developing a feature where users can input an address and retrieve the GPS values in both degree and/or decimal format. However, my main challenge is understanding how t ...

The Coinbase Pay application fails to compile properly due to a missing Babel loader

Currently, I am working on integrating the coinbase pay sdk into my project. Although I have successfully created a button utilizing their provided examples, I am encountering an issue during the build process which seems to be internal to their SDK. Spec ...

Showing submenu items in a jQuery menu system without causing the top level menu item to expand and fit

I currently have a menu system in place, which is quite simple, but there is an issue where the submenu items are larger than the top-level items. When hovering over the submenu items, the top-level menu expands to accommodate them. Is there a way to keep ...

Fixed positioning of a div at a margin-top of 20 pixels while scrolling upwards

Seeking a solution for my div to remain fixed at 20px from the top of the window when scrolling up and 40px from the footer when reaching the bottom. My current code is inconsistent, is there a more efficient method available? Page Link $(document).scro ...

Discover choices based on the values in an array

I'm having trouble finding an option in a select menu based on an array value. var array = ["task1", "task2"] var select = document.getElementsByTagName('select'); for (i = 0; i < 2; i++) { $(select).find('option[value=array[i]] ...

Deciphering the significance behind the initial five lines of code in jQuery

Curiosity piqued, I delved into the jQuery code only to be met with this puzzling snippet: ! function(a, b) { "object" == typeof module && "object" == typeof module.exports ? module.exports = a.document ? b(a, !0) : function(a) { i ...

Drawing glitch on the canvas

Having trouble with drawing an image to a Canvas element and encountering this error: Uncaught Error: INDEX_SIZE_ERR: DOM Exception 1 textureLoadedstaticsprite.js:14 StaticSpritestaticsprite.js:21 (anonymous function) Despite having both th ...

I am experiencing difficulties in installing JavaScript libraries

PS D:\React> npm i -g expo-cli npm WARN EBADENGINE Unsupported engine { npm WARN EBADENGINE package: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d48555d42004e41446d68c7b6d717268805a6369786964 ...

Creating dynamic Vue2 router links based on server-generated data

Currently, I am working on a Vue2 Single Page Application that fetches content from the server and allows clients to edit it in a Content Management System (CMS). The issue I'm facing is that when a user adds a relative link such as /about-us, Vue do ...

Angular TypeScript Directive Link function not being executed

I've been working on implementing a Role-Based-Access-Control system in my application. The allowed resources are loaded from the server after login, and I was able to verify this using raw JavaScript code. angular.module('app').directive(& ...

WebGL fetchpixel function functions properly in Chrome, yet encounters issues in Firefox

Hello! I've been using the webgl script below to read from a render object. While this works perfectly in Chrome, it's throwing an error "Error: WebGL: readPixels: Invalid type floatness" in Firefox and IE: Check out the code snippet here: var ...

Utilizing ReactRouter via CDN without needing npm

As someone new to React, I have been practicing by directly incorporating the react.js and react-dom.js files along with browser.min.js for JavaScript transformation into my HTML page. Now, I am looking to utilize react-router and have added the ReactRoute ...

Utilize the objects array property to filter an array of objects

Struggling to wrap my head around this, not sure if it's feasible in this manner but I just can't seem to grasp it. I have an array of objects where each object contains some values and another array of objects. Essentially, I need to filter the ...

What is the technique for extracting data from a Firebase application after a user has successfully logged in?

I'm currently facing an issue with my website's forum, which is integrated with Firebase for storing forum posts and user login information. The challenge I'm encountering involves retrieving data from the logged-in user's child in orde ...

Steps for verifying the presence of an element in Selenium using JavaScript

I'm facing an issue with a Jest and Selenium test. I'm trying to verify if an element is removed from the DOM after being clicked. Here's what I've attempted: test('User removes button after clicking on it', async (done) =& ...

How can I pass standard HTML as a component in React?

I need help creating a Higher Order Component (HOC) that accepts a wrapper component, but allows me to pass standard HTML elements as inner content. Here is an example of what I want to achieve: type TextLike = string | {type,content} const TextLikeRender ...

In order to view current data on the chart, I need to use array.slice() in the markup which unfortunately disables the ability to select specific points. Check out the Stackbl

When viewing the line chart, there is a select event that allows for the selection of points and legend items. The line chart includes an activeElements input property that requires an array of the active elements to be passed in. One interesting thing to ...

Ways to expand the play and pause buttons and adjust the height of an HTML audio player

It's clear that the PLAY/PAUSE icons are smaller than intended, and the entire player is thinner than desired, making it difficult for some viewers to see. How can I enlarge the entire player? I have read that we do not have access to individual contr ...

What is the best way to manage two different IDs, one using jQuery and the other using Vue.js?

How can I manage to include a sliding effect for my products using jQuery ID and display items with Vue.js? <script type="text/javascript> $(window).load(function() { $("#flexiselDemo1").flexisel({ ....................... ...

If additional content has been included in the `div`, be sure to scroll all the way down to view it

I have a div that needs to automatically scroll to the bottom when new content is added. This is a common feature in chat applications where the user wants to see the latest messages without having to manually scroll down each time. How can I achieve this ...