Enabling automatic scaling during the rendering of an .stl file using three.js

I'm in the process of developing a server/webpage with the following functionality:

  1. Users can upload an .stl file to be 3D-printed
  2. The server executes a mesh repair script on the uploaded .stl file
  3. The corrected .stl file is displayed in the user's browser for verification, ensuring that the script did not negatively impact the file

One challenge I'm encountering pertains to step 3. I am attempting to utilize an example from the three.js repository to render the .stl file:

https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_stl.html

The issue arises when the model within the .stl file is too large, causing it to extend beyond view. To rectify this and ensure the entire model is visible within the camera frame, adjustments need to be made to the parameters within the mesh.scale.set(x, y, z) function in the following code snippet:

var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {

    var geometry = event.content;
    var mesh = new THREE.Mesh( geometry, material );

    mesh.position.set( 0, - 0.37, 0 );
    mesh.rotation.set( - Math.PI / 2, 0, 0 );
    mesh.scale.set( 2, 2, 2 );

    mesh.castShadow = true;
    mesh.receiveShadow = true;

    scene.add( mesh );

} );
loader.load( './models/stl/binary/pr2_head_tilt.stl' );

However, my goal is to automatically determine the size of the model in the .stl file and adjust its scale accordingly.

This feature is achievable, as demonstrated by GitHub's STL file viewer. You can experience this functionality by visiting the link below and selecting one of the .stl files:

https://github.com/mrdoob/three.js/tree/master/examples/models/stl/binary

In essence, the GitHub STL file viewer exemplifies what I aim to replicate, seamlessly loading any .stl file without necessitating manual zooming in or out for proper visualization of the model.

Answer №1

The visibility of a model in your viewport is influenced by your camera settings and scene setup. To determine the size of the model, you can use the .boundingBox or .boundingSphere properties of the Geometry and then apply scaling based on your desired outcome. The BoundingBoxHelper tool can also assist in visualizing the dimensions of your model.

For further information, you may refer to: How to Fit Camera to Object as well as Adjusting camera for visible Three.js shape

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

Encountering a 405 Error while attempting to perform a search on Twitter

I have been attempting to search Twitter using jQuery, but I am encountering an issue. The response only shows: https://api.twitter.com/1.1/search/tweets.json?q=django 405 (Method Not Allowed) XMLHttpRequest cannot load https://api.twitter.com/1.1/search/ ...

Incorporating JSON data into an HTML table

Looking to populate an HTML table with JSON data, but struggling with parsing and appending the data correctly. Can anyone provide guidance or assistance? <!DOCTYPE html> <html> <head> <title>JSON Demo</title> < ...

The link appears to be broken when trying to access the notFound component in Next.js version 13

In my Next.js 13.4 app directory, I added a not-found.tsx component that functions correctly when entering the wrong route: import Link from 'next/link' function NotFound() { return ( <section> 404, page not found ...

Search for text within the nearest <p> tag using HTML and jQuery

My table contains different td elements with the same ID, as shown in this foreach loop: <td class="AMLLeft" style="display:inline-block; !important">ID: <p class="important">${item.id}</p> </td> <td align="right" nowrap="tr ...

Keeping track of the toggle state using a cookie

While searching for a way to retain the toggle state, I stumbled upon js-cookie on GitHub. The documentation provides instructions on creating, reading, and deleting a cookie. However, an example would have been really helpful in enhancing my understanding ...

Is it safe to set content type as text/plain instead of application/json for JSON response?

I've been developing a PHP script to retrieve public JSON data, which will be accessed by JavaScript on the client side. However, I've encountered an issue with the server (LiteSpeed shared hosting) not having brotli/gzip compression enabled for ...

Struggling to resolve the issue while deploying a Next.js application on Netlify. The error seems to be stemming from the import of an image and its

I attempted to eliminate the code on line 4 and line 15 in index.js, then deployed it on Netlify. The functionality is working correctly, but the image is not displaying as desired. However, when I try to modify the code with just lines 4 and 15 included, ...

Tips for configuring CakePHP to trigger the second submit button when the enter key is pressed

My form includes two submit buttons: "cancel" and "find." While both buttons work correctly when clicked, pressing the enter key always triggers the submission of "cancel." I don't want to change the button order in the form. To address this issue, I ...

The jquery live click event is not functioning properly on iPad devices

I am experiencing an issue with a webpage that has the following code to bind click events <script type="text/javascript"> $(".groupLbl").live("click", function(e) { var $target = $(e.currentTarget); ..... $.getJSON("/somelink.js ...

Communication between React.js and Node.js in VS Code

I recently started learning React and node js. I managed to create a simple "Hello World" project in reactjs, which works perfectly. App.js import React, { Component } from 'react'; import logo from './logo.svg'; import './App.cs ...

Issue encountered while retrieving JSON data from Github

I am currently using d3.json to retrieve a JSON link from the Enterprise GitHub (within the same repository/folder as the JavaScript file). d3.json("https://raw.github.exampleEnterprise.com/path/to/repo/data.json?token=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX ...

Ensuring validity using dynamic context objects within Joi

I need to implement a dynamic validation system that involves downloading an object at runtime and saving it as a well-formed .json file. The objective is to use the values from this downloaded object as part of a validation process using Joi.validate wi ...

Customizing the appearance of charts in AngularJS using the Chart.js

I just started experimenting with AngularJS and recently created a horizontal bar chart using Chart.js and HTML. My next step is to make the chart dynamically appear on the page with the help of AngularJS. Can someone please provide some guidance on how I ...

Incorporate a new JavaScript animation as the background for an established website, replacing the static background image

Seeking assistance with my portfolio as I delve into the world of Webdesign and learn the basics from templates. How can I integrate this javascript code into the background of my site, replacing the current minecraft image? Every attempt to implement it ...

Instructions on filling the star icon with color upon clicking the button

Currently working on a project using codeIgniter where I have a form for rating products. I am facing an issue where, upon clicking the star button, only the border color changes to yellow while the center of the button remains white. Can someone please g ...

Limit the vertical movement in Vue drag and drop operations

Currently, I am working on a project that involves implementing drag-and-drop functionality using vue-draggable. You can find more information about it here: https://github.com/SortableJS/Vue.Draggable. I am facing an issue where the height of the element ...

Tips on pausing a moving image from left to right and restarting it later

Is there a way to pause the left to right moving image at the end and then restart the loop? I tried utilizing this website link for assistance: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-delay Unfortunately, I couldn't fi ...

Refreshing the DOM following an API call using VueJS

Struggling with updating the DOM after fetching data from an API. Although my object is successfully fetching the data, the DOM renders before receiving the API Data and fails to update afterward. I'm puzzled as to why it's not refreshing itself ...

What are the steps to retrieve all memcached information using node.js?

One of my main objectives is to have the user session data expire when they close their browser. However, I am facing a challenge because my Server depends on memcached to function correctly. Therefore, I need to find a way to specifically delete the use ...

A more detailed explanation of Angular's dot notation

I came across a solution for polling data using AngularJS here on stackoverflow. In this particular solution (shown below), a javascript object is used to return the response (data.response). I tried replacing the data object with a simple javascript arra ...