Scaling Three.js Mesh to fit renderer while maintaining aspect ratio

Question

Scaling Three.js Mesh to fit renderer while maintaining aspect ratio

Currently, I am using the STLLoader plugin from the Github repository of three.js.

This is a snippet of my code:

this.loadSTL = function(scene, stlFile){
      var loader = new THREE.STLLoader();
      loader.addEventListener('load', function(geometry, materials){
        var geometry = geometry.content;
        var material = new THREE.MeshPhongMaterial({ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200});
        var mesh = new THREE.Mesh(geometry, material);

        mesh.position.set(0, -0.9, 0);
        mesh.rotation.set(0, 0, 0);
        mesh.scale.set( 0.012, 0.012, 0.012);

        scene.add(mesh);
      });
      loader.load(stlFile);
    }

The issue at hand is that the object loaded from the STL file tends to change in height when the window resolution changes. Is there a specific setting we should be configuring to maintain a consistent width/height for the mesh regardless of the screen or window resolution?

javascript three.js

Answer 1

Answer №1

One possible solution is to manage the window resize event like so:

const handleResize = () => {
    camera.aspect = canvas.width / canvas.height;
    camera.updateProjectionMatrix();
    renderer.setSize(canvas.width, canvas.height);
};

Answer 2

One possible solution is to manage the window resize event like so:

const handleResize = () => {
    camera.aspect = canvas.width / canvas.height;
    camera.updateProjectionMatrix();
    renderer.setSize(canvas.width, canvas.height);
};

Answer 3

Answer №2

By adjusting the camera.aspect to be equal to 1, I was able to resolve the issue at hand. However, for a more accurate solution, it is advisable to set the aspect ratio as follows:

camera.aspect = $container.width/$container.height

Answer 4

By adjusting the camera.aspect to be equal to 1, I was able to resolve the issue at hand. However, for a more accurate solution, it is advisable to set the aspect ratio as follows:

camera.aspect = $container.width/$container.height

Scaling Three.js Mesh to fit renderer while maintaining aspect ratio

Answer №1

Answer №2

Similar questions

Setting a background image in ReactJS

Prevent any screen interactions by disabling clicks, and then re-enable them either after a set amount of

Create functionality for editing and reviewing content within an HTML webpage

typescript - instantiate an object using values stored in an array

Converting JSON data into GeoJSON format using JavaScript

The Less compiler (lessc) encounters an issue on a fresh operating system. ([TypeError: undefined is not a function])

Nightwatch encounters difficulty in accessing the iframe element

Connect radio input's value to object's key within AngularJS

AngularJS - Increase the input date by 6 hours before converting it to JSON

Encountering challenges with concealing a div element

Dealing with numerous identical ajax requests in jQuery

The JavaScript functions are not loading within the onload event handler

Struggling to make the transition from JavaScript to TypeScript in Ionic 2

Using select tags in conjunction with JavaScript can add dynamic functionality to your website

Using jQuery to smoothly scroll to a specific class name

Personalizing the arrow positioning of the Angular8 date picker (both top and bottom arrow)

Dynamically assigning classes based on the element that is being scrolled beyond

Is it possible to retrieve values from my model when working with Django Templates and incorporating them in the JavaScript header?

React's .map is not compatible with arrays of objects

Acquiring a website's dynamic value using jquery