Adjusting the dimensions of a shape proportionally as the window size is altered through the onWindowResize() function

Question

Adjusting the dimensions of a shape proportionally as the window size is altered through the onWindowResize() function

After completing some coding courses, I am now venturing into the world of WebGL using Three.js to enhance my programming skills.

I have been experimenting with a widely used function in examples on threes.org:

        function onWindowResize() {

          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();

          renderer.setSize(window.innerWidth, window.innerHeight);

        }

This function allows me to adjust the size and centering of my geometry based on the width and height of my browser window. However, I have encountered an issue when decreasing the width of the window where my geometry becomes cut off due to its centralized positioning without scaling down proportionally.

In an attempt to rectify this problem, I implemented object.scale.devideScalar(1.5); within my onWindowResize() function in this example: http://codepen.io/gnazoa/pen/BjoBZz. Unfortunately, this adjustment did not solve the issue.

The discrepancy between how the geometry appears on my desktop screen compared to on my iPhone illustrated the importance of finding a solution for this problem:

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

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

If you have any suggestions or insight on resolving this dilemma, it would be greatly appreciated as I strive for an optimal user experience regardless of device.

javascript three.js

Answer 1

Answer №1

Welcome to the wonderful world of js/Three.js! Thank you for sharing your fiddle with us. If you're interested, here's my recommended solution.

1) Just a heads up, there's a small typo on line 44

object.scale.devideScalar(1.5);

should be

object.scale.divideScalar(1.5);

If you check your browser's dev tools (chrome, firefox, or any other browser), you might see an error message like:

Uncaught TypeError: object.scale.devideScalar is not a function

2) Even after fixing that issue, there's another problem. The way you've written the code alters the scale of the three.js cube by reducing it by 66% every time onWindowResize() is called. Consequently, the cube disappears quickly as its scale diminishes. Not ideal.

To ensure that the object's scale retains the same proportions relative to the screen size during resize, regardless of the initial or resized dimensions, you need a different approach.

The renderer cannot be stretched without distorting the 3D projection, nor can a cube fill any screen without distortion. As such, my radical suggestion is not to resize the canvas to completely fit the container. Instead, create a containing div that partially fills the window and adjust the css accordingly.

I have included some new code in my proposed solution. This code snippet focuses on maintaining aspect ratio when resizing the preview window:

var targetAspectRatio = 16 / 9; //cinematic!
function aspectSize(availableWidth, availableHeight) {
  var currentRatio = availableWidth / availableHeight;
  if (currentRatio > targetAspectRatio) {
    return {
      width: availableHeight * targetAspectRatio,
      height: availableHeight
    };
  } else {
    return {
      width: availableWidth,
      height: availableWidth / targetAspectRatio
    };
  }
}

This method ensures that the rectangular content retains its aspect ratio when adjusting to different screen sizes.

Feel free to customize the code further to suit your needs. Good luck with your project!

Answer 2

Welcome to the wonderful world of js/Three.js! Thank you for sharing your fiddle with us. If you're interested, here's my recommended solution.

1) Just a heads up, there's a small typo on line 44

object.scale.devideScalar(1.5);

should be

object.scale.divideScalar(1.5);

If you check your browser's dev tools (chrome, firefox, or any other browser), you might see an error message like:

Uncaught TypeError: object.scale.devideScalar is not a function

2) Even after fixing that issue, there's another problem. The way you've written the code alters the scale of the three.js cube by reducing it by 66% every time onWindowResize() is called. Consequently, the cube disappears quickly as its scale diminishes. Not ideal.

To ensure that the object's scale retains the same proportions relative to the screen size during resize, regardless of the initial or resized dimensions, you need a different approach.

The renderer cannot be stretched without distorting the 3D projection, nor can a cube fill any screen without distortion. As such, my radical suggestion is not to resize the canvas to completely fit the container. Instead, create a containing div that partially fills the window and adjust the css accordingly.

I have included some new code in my proposed solution. This code snippet focuses on maintaining aspect ratio when resizing the preview window:

var targetAspectRatio = 16 / 9; //cinematic!
function aspectSize(availableWidth, availableHeight) {
  var currentRatio = availableWidth / availableHeight;
  if (currentRatio > targetAspectRatio) {
    return {
      width: availableHeight * targetAspectRatio,
      height: availableHeight
    };
  } else {
    return {
      width: availableWidth,
      height: availableWidth / targetAspectRatio
    };
  }
}

This method ensures that the rectangular content retains its aspect ratio when adjusting to different screen sizes.

Feel free to customize the code further to suit your needs. Good luck with your project!

Adjusting the dimensions of a shape proportionally as the window size is altered through the onWindowResize() function

Answer №1

Similar questions

What could be causing my Google Chrome extension to only allow me to open 25 tabs instead of more?

What is the best way to differentiate between a JSON object and a Waterline model instance?

Error: The URL type "workspace:" is not supported: workspace:*

A singular Vuejs Pinia store utilizing namespaced actions

What is the best way to transform an array of objects in JavaScript?

Unexpected activity in Socket.io

The promise is only guaranteed to resolve correctly upon the refreshing of the page

Is it possible for me to determine the quantity of lines present in the text without any

Tips for invoking a function from a JavaScript file within an Angular component

I encountered a permission denied error when trying to enter DEBUG=app ./bin/www in Node.js

Unable to invoke parent method from child component in Vue causing issue

How can I use jQuery to separate special characters from letters in a string?

Adding up values of objects in a different array using Vue.js

Is there a way to verify that a form field has been completed?

Can you explain the functions of this "malicious" JavaScript code?

When the page initially loads, the block appears on top of the upper block and remains in place after the page is refreshed

Maintaining microsecond accuracy when transferring datetime values between Django and JavaScript

What is the proper way to integrate "require" into my Angular 2 project?

Utilizing the doGet approach to send form data upon clicking a button

Using jQuery to retrieve the TD value