Resizing a cube in three.js

Question

Resizing a cube in three.js

Here is my code using three.js:

cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200, 1, 1, 1, materials), new THREE.MeshFaceMaterial());
cube.position.y = 150;
cube.position.x = 0;
scene.add(cube);

However, I am facing an issue where the size of my cube keeps changing. To elaborate further, whenever I resize my browser and refresh the page, the cube's size differs each time. Is there a way to set a fixed size for the cube, regardless of window resizing?

javascript three.js

Answer 1

Answer №1

To adjust the size of the renderer, you can set a fixed dimension:

renderer.setSize(WIDTH, HEIGHT);

Here is a straightforward example to illustrate this: http://jsfiddle.net/9stj8/

Be sure to verify if your code properly handles the window resize event.

Answer 2

To adjust the size of the renderer, you can set a fixed dimension:

renderer.setSize(WIDTH, HEIGHT);

Here is a straightforward example to illustrate this: http://jsfiddle.net/9stj8/

Be sure to verify if your code properly handles the window resize event.

Answer 3

Answer №2

Although this question has already received an answer, I wanted to contribute a little something for the sake of posterity and to ease the frustration levels of future readers.

In my experience with Three.js, I have primarily used the Perspective Camera over the orthographic camera. I recently came across a solution to the discussed problem related to setting up the perspective camera correctly:

fov (vertical field of view angle)
aspect ratio (width / height value) <-- Crucial!
near clipping plane (object proximity threshold for visibility)
far clipping plane (object distance threshold for invisibility)

The aspect ratio of the camera is essential for rendering properly in the viewport, especially when resizing the browser window. An inconsistency between viewport size and camera/renderer settings can result in distorted or incomplete images. To address this, you need to update the camera and renderer when the window size changes.

As suggested by Juan Mellado, you can adjust the viewport size using renderer.setSize(w,h). Here's how you can ensure that the camera and renderer adapt to window resize events:

function onResize()
        {
            var width, height;
            width = window.innerWidth; // for example
            height = window.innerHeight; // for example                

            //Update the camera's aspect ratio: width / height
            camera.aspect = width/height;

            //Don't forget to call updateProjectionMatrix() after making changes to the camera
            camera.updateProjectionMatrix();

            //Reset the renderer size to match the new dimensions
            renderer.setSize(width, height);
        }

To bind this callback function to the window.resize event, you can use either jQuery or plain JavaScript:

jQuery(window).resize(onResize);

or

window.onresize = onResize;

Summary:

1.) Make sure the values used to calculate Camera Aspect Ratio align with the renderer size values passed.

2.) Bind a callback function to the window.onresize event to ensure the camera aspect ratio and renderer size scale with the browser's dimensions.

3.) After modifying the camera post-creation, remember to invoke "updateProjectionMatrix()" to apply your changes.

If everything is set up correctly, the camera aspect ratio and renderer size will adjust automatically when resizing the window.

Happy coding!

Answer 4

Although this question has already received an answer, I wanted to contribute a little something for the sake of posterity and to ease the frustration levels of future readers.

In my experience with Three.js, I have primarily used the Perspective Camera over the orthographic camera. I recently came across a solution to the discussed problem related to setting up the perspective camera correctly:

fov (vertical field of view angle)
aspect ratio (width / height value) <-- Crucial!
near clipping plane (object proximity threshold for visibility)
far clipping plane (object distance threshold for invisibility)

The aspect ratio of the camera is essential for rendering properly in the viewport, especially when resizing the browser window. An inconsistency between viewport size and camera/renderer settings can result in distorted or incomplete images. To address this, you need to update the camera and renderer when the window size changes.

As suggested by Juan Mellado, you can adjust the viewport size using renderer.setSize(w,h). Here's how you can ensure that the camera and renderer adapt to window resize events:

function onResize()
        {
            var width, height;
            width = window.innerWidth; // for example
            height = window.innerHeight; // for example                

            //Update the camera's aspect ratio: width / height
            camera.aspect = width/height;

            //Don't forget to call updateProjectionMatrix() after making changes to the camera
            camera.updateProjectionMatrix();

            //Reset the renderer size to match the new dimensions
            renderer.setSize(width, height);
        }

To bind this callback function to the window.resize event, you can use either jQuery or plain JavaScript:

jQuery(window).resize(onResize);

or

window.onresize = onResize;

Summary:

1.) Make sure the values used to calculate Camera Aspect Ratio align with the renderer size values passed.

2.) Bind a callback function to the window.onresize event to ensure the camera aspect ratio and renderer size scale with the browser's dimensions.

3.) After modifying the camera post-creation, remember to invoke "updateProjectionMatrix()" to apply your changes.

If everything is set up correctly, the camera aspect ratio and renderer size will adjust automatically when resizing the window.

Happy coding!

Resizing a cube in three.js

Answer №1

Answer №2

Similar questions

Transmit information to Flask server using an AJAX POST call

Switch the class of the child element from the previous element using jQuery

Avoiding line breaks when submitting data through Ajax calls is achievable by using the `.val` method

"Excessive use of Javascript setInterval combined with frequent ajax calls is causing significant

Fluidly insert or delete elements

The voting system will increase or decrease by 1 to 5 during each round

Chakra UI: How come the tooltip is appearing in the top left corner of the screen instead of directly above the element?

Error: The file 'templates.js' cannot be found or accessed by gulp-angular-templatecache. Please check the file path and make sure it

The initial attempt to use autocomplete with Jquery UI is not functioning as expected upon entry

What is the process for closing the lightbox?

Designing an interactive 3D space using JavaScript

JavaScript and TypeScript: Best practice for maintaining an Error's origin

Is it possible to programmatically set focus on a DOM element using JavaScript or jQuery?

Combining vueJS and webpack to bring in fonts, CSS styles, and node_modules into your project

next.js users may encounter a problem with react-table not rendering correctly

Retrieve information from the existing URL and utilize it as a parameter in an ajax request

Align the position of two divs with matching IDs (#thumb-1 equals #project-1) using JavaScript or jQuery, but without the use of jQuery UI

Tooltip remains visible even after formatting in highcharts

Publishing Your App on the Android Market with PhoneGap

Concealing specific elements in Angular by utilizing ng-class conditions