Change the field of view (FOV) of the Three.js camera according to

Is there a way to modify the standard Three.js resize code so that the scene scales with the DOM element's width as it does with the height? Currently, the scene scales in relation to the element's height, but when the width decreases, the model gets cropped by the element. How can I ensure that the scene scales proportionally with both the element's width and height?

window.onresize = function(event) {
    camera.aspect = $(threeContainer).width() / $(threeContainer).height();
    camera.updateProjectionMatrix();
    renderer.setSize($(threeContainer).width(), $(threeContainer).height());
};

Answer №1

The simplest hack is to imitate it.

To determine the canvas size, match it to the aspect ratio of the container. These are good options to consider:

  • Width = 800, Height = 600, Aspect Ratio = 4/3 = 1.333
  • Width = 500, Height = 500, Aspect Ratio = 1
  • Width = 600, Height = 800, Aspect Ratio = 3/4 = 0.75

If the aspect ratio is below 1, adjust the canvas height to accommodate the vertical field of view.

if(w/h < 1){
    renderer.setSize($(threeContainer).width(), $(threeContainer).height() * (w/h));
}

To align renderer.domElement in the center of threeContainer, apply some styling. This centering might not be noticeable in a wider container but will create the illusion of proper scaling in a taller container.

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

NG0303: Unable to establish a connection with 'ngbTooltip' as it is not recognized as a valid property of 'button'

ERROR: 'NG0303: Can't bind to 'ngbTooltip' since it isn't a known property of 'button'.' Encountering this issue in my Angular 12 project when running local tests, the ngbTooltip error is present in all .spec files. ...

Is it more efficient to use Vue events or Vuex for transmitting data between components?

Working on a project where data needs to be shared between components in order to update a canvas element at 30-60fps for optimal performance on low-end devices. Currently utilizing Vuex store/get method for data transfer, but considering using events as ...

In what way does React ensure state encapsulation while passing state as a prop to a child component?

This question pertains to an intricate aspect of React, specifically focusing on state encapsulation. The example provided in this response to the query mentioned in this post illustrates how React props that are objects are passed by reference: const ...

Inheritance best practices for node.js applications

In C#, the concept of inheritance can be easily demonstrated through classes like Animal and Dog. class Animal { string name; public Animal() { } } class Dog : Animal { public Dog() : base() { this.name = "Dog"; } } When working ...

AngularJS Event Handler Fails to Trigger

I'm currently working on a form that I need to submit using the ng-submit event through a custom Auth service. This is a snippet of the login.html (partial template) <div class='container'> <form class='form-signin' ...

The value of $parent.$index will consistently be 0 in all cases

I am currently dealing with a nested ng-repeat situation where I am attempting to determine the parent's index. Due to the fact that it is being arranged post-process, the standard ng-repeat="(step_index, step) in flow" method is not working for m ...

Incorporating database row data into JavaScript objects: a guide

Here's a question that has me stumped and seeking help. Following an ajax send request, I utilized this php code to retrieve all the rows and columns from my database: $sql = "SELECT * FROM categories"; $result=$conn->query($sql); $arr = $resul ...

When utilizing KineticJS on a canvas that has been rotated with css3, the functionality of the events appears to be malfunctioning

Currently, I'm working on a rotating pie-chart widget using Kineticjs. However, I have run into an issue where the events don't seem to function correctly when drawing on a rotated canvas element (with the parent node being rotated 60deg using CS ...

Using TypeScript: Implementing array mapping with an ES6 Map

If I have an array of key-value objects like this: const data = [ {key: "object1", value: "data1"}, {key: "object2", value: "data2"}, {key: "object3", value: "data3"}, ] const mappedData = data.map(x => [x.key, x.value]); const ES6Map = n ...

Discover and eliminate nested levels

How can I locate and delete a specific value with the ID "5cc6d9737760963ea07de411"? Data: [ { "products" : [ { "id" : "5cc6d9737760963ea07de411", "quantity" : 1, "totalPrice" : 100, ...

Display information in a detailed table row using JSON formatting

I have set up a table where clicking on a button toggles the details of the corresponding row. However, I am having trouble formatting and sizing the JSON data within the table. Is there a way to achieve this? This is how I implemented it: HTML < ...

The GAS web application is experiencing issues with sorting dates correctly on the Javascript table

I have a food consumption log in a table that I need to sort. When I attempt to sort by the date column, I notice an issue with how it groups numbers together. For example, the sorting places all dates starting with 10 between 1 and 2, then all dates star ...

Styling CSS for disabled nested elements

In a project I am currently working on, I've noticed that disabled items do not appear disabled enough. My initial plan was to easily address this issue with some CSS. Typically, adjusting the opacity is my go-to solution to achieve the desired effec ...

What is the best way to play a random song when the user clicks a button?

My goal is to develop a website where users can click on an image and have a random song play from a playlist. I currently have a functioning code that activates one song, but it fails when adding multiple songs to the mix. <html> <head> ...

Locate the index and value of the item that has the most recent date

Exploring my API design const dataArr = [{ end_date: '2019-12-16' }, { end_date: '2018-12-16' }]; const latestEntry = dataArr.filter( /* Seeking the index of the item with the most recent date */ ); Interested in vanilla JavaScript ...

What is the best method to retrieve the current time in minutes using the Timer component?

I have integrated the react-timer-hook library into my Next.js application to display a timer. The timer is functioning correctly, but I am encountering an issue where I cannot retrieve the current elapsed time in minutes during the handle form event. My g ...

Determine if a point within a shape on a map is contained within another shape using Leaf

I have extracted two sets of polygon coordinates from a leaflet geoJSON map. These are the parent and child coordinates: var parentCoordinates=[ [ 32.05898221582174, -28.31004731142091 ], [ 32.05898221582174, -2 ...

The animation function in A-frame causes entities to vanish when used with D3.js

Working with the animation property in D3.js has been a bit of a challenge for me. When I include the a-animation directly in the HTML section, everything works as expected. <a-box id="box" position="0 1 0" rotation="0 0 0" scale="1 1 1" color="#4CC3D9 ...

Retrieve the country code of an IP address using getJSON

I am currently facing an unusual issue. My goal is to extract the country code (like US for United States) from an IP address using free APIs. After some research, I came across ipify for retrieving the IP address (which works fine), and then attempted to ...

The script fails to load when utilizing jquery/ajax

After the page loads, I am attempting to dynamically add a script into a div using ajax/jquery. This particular script is sourced from a CPM network and is responsible for loading a banner. However, when I try to load this script through ajax post-page lo ...