Attempting to create a responsive Boxplot in Three.js

I created a basic three.js boxplot that loads individual jpg images for each mesh (bar). The boxplot appears fine on desktop, but is stretched/distorted on mobile devices. Is there a recommended approach to make it responsive?

For simplicity, I will use example public URLs for each mesh.

Here is the code snippet:

<canvas id="threeBoxPlot"></canvas>

<style>
#threeBoxPlot {
  position: absolute;
  top: 10500px;
  left: 100px;
  width: 100%;
  height: 100%;
  display: block;
}
</style>

<script>
initiateThree();

function initiateThree() {
  // JavaScript code goes here
}

// Rest of the JavaScript code...
</script>
  

Answer №1

One important practice to follow when working with Three.js is recalculating the camera's aspect ratio and resizing the renderer whenever the browser window is resized. This is a common standard used in all Three.js examples:

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize() {
    // Update camera
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    // Update renderer
    renderer.setSize( window.innerWidth, window.innerHeight );
}

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

Changing a file object into an image object in AngularJS

Can a file object be converted to an image object? I am in need of the width and height from the file (which is an image). Here is my code: view: <button id="image_file" class="md-button md-raised md-primary" type="file" ngf-select="uploadFile($file ...

How can you make nested JSON values optional in Joi Validation?

As I work on my API, I encounter a nested JSON structure that serves as the payload for the endpoint. Here is an example of what it looks like: {"item_id":"1245", "item_name":"asdffd", "item_Code":"1244", "attributes":[{"id":"it1","value":"1"},{"id":"it2" ...

Is there a term in JavaScript that denotes an object that can be serialized into JSON format?

Can you help me find a term for basic objects that accentuates their simplicity? Particularly, objects that do not reference themselves and do not have any methods or bindings (i.e. JSON-serializable). The terms I am currently using are: "flat object" " ...

I'm getting an error about uncaught products in a collection - can you help me understand what this means and how to

My next.js website, which fetches products from Shopify, was working flawlessly until a few months ago when it suddenly stopped building on the development server. Now, whenever I try to run the website locally, I am encountering a "Cannot read properties ...

Having trouble getting haxe-pixi.js to function properly as it only shows a blank white screen

***UPDATE: Success! Managed to solve the issue. It turns out the missing library in the html file was causing the problem. The pixi.min.js file was not present in the haxelib directory, which seems a bit unusual. Here's a more challenging question: i ...

Analyze data visualization selections with React on click functionality

Currently, I have implemented a highcharts column chart within my react application and now I am looking to include an onClick event for the chart. Essentially, when a user clicks on a column, my objective is to extract the X and Y axis values and then tri ...

Is it possible to trigger the setState() function of a parent component when a child component is clicked?

Hey there, I'm a new developer diving into the world of Reactjs. I've been working on setting up a Todo app but struggling to configure it just right. My main challenge is getting a button to add items to the list when submitted. I think I'm ...

What could be causing the hang when attempting to insert a script using Bookshelf.js?

Can anyone help me understand why the Node.js script refuses to exit? // myscript.js var Model = bookshelf.Model.extend({ tableName: 'models' }); var m = Model.forge({name: 'hello'}); m.save(); console.log("End"); Even after running ...

Issue with disabled dates not refreshing in the view after adding them via button click

I have been utilizing the vue-hotel-date-picker plugin and it's been functioning well. The problem arises when I use the disabled dates props; it disables the dates initially when initializing and updating on the calendar. However, when I update the d ...

Using AngularJS to create interactive popups within leaflet maps

My map uses leafletjs to create markers such as ev124, ev125, and so on. In addition, there are links with a key attribute like <a ng-click="popup(evsi)" key="124">link</a> Using angular, I extract the key value this way: $scope.popup= funct ...

Delete the final character from the value stored in the map

After retrieving data from the backend, I receive: {"Item":{"userEmail":"b","Username":"bUsername","Push":"sdsdsd","Password":"sdsds","Buddy":{"datatype":"SS","contents":{"Drake":"Drake","Ola":"Ola","b":"b","d":"d"}}}} Utilizing Object.Keys, I filter ...

What is the best method for extracting an attribute value from an HTML <a> element?

I've been attempting to scrape the specified website, but I'm having trouble retrieving the value of the 'data-link' attribute. Is there anyone who can assist me with this issue? //first try (resulting in an error) const puppeteer = ...

Tips for displaying JSON data by formatting it into separate div elements for the result object

Having recently started using the Amadeus REST API, I've been making AJAX calls to retrieve data. However, I'm facing a challenge when it comes to representing this data in a specific format and looping through it effectively. function showdataf ...

Unattractive destructuring during conditional assignment

When working with object properties, ESLint often suggests using object destructuring. However, this can sometimes result in redundant lines of code. ESLint may not allow something like the following (which might seem like the preferable approach): const ...

Incorporating the angular UI router effectively by reusing the same templateUrl and controller multiple times

Exploring the AngularUI Router framework for the first time, I am curious about how to enhance the code snippet below. Everything is functioning well at the moment, but as the project progresses, it will feature 20 questions or more. I want to avoid repea ...

Route Handler 13 is encountering difficulties in retrieving data from the body in the (app/api/auth) endpoint

Whenever I attempt to retrieve the body from the new export async function POST( req: Request), it seems to come through as a stream instead of the expected content type. The route handler can be found in api/auth/signup See folder layout image export asyn ...

To retrieve the first td element by clicking a button within the corresponding row using JQuery

This may seem like a straightforward inquiry, but despite my best efforts, I have been unable to find a solution. I am looking to create a function that will allow me to click a button located in the 3rd td element and display the text from the first td e ...

Implementing custom routing in Express based on specific route parameter values

Scenario I am currently working with a route that has the following structure: router.get('/api/v1/tokens/:token_name', middleware1, middleware2) While this setup works well for most values of token_name, I now need to incorporate special handl ...

Creating text using the Bootstrap grid system

I am currently using Bootstrap and have set up a grid with a circle on the left side. I am now facing an issue where any text I try to add next to the circle overlaps with it. I need the text to not overlap with the circle and vice versa, while also being ...

Can AngularJS Filters be used to convert a number into a string, but not the other way around?

After researching Angular JS filters, I discovered that the number filter is used to format a number as a string. However, there doesn't seem to be a built-in filter for converting a string to a number. In an attempt to solve this issue, here is so ...