Adhere" external documents onto a grid with the help of three.js

Currently, I am working in a .Stl editor on Three.js and I am facing the challenge of aligning my imported .Stl files to the grid properly. The issue is that they are ending up either partially above or below the grid, instead of sticking right onto it. I need a way to determine if the lowest part of the object is touching the grid.

The problem lies in the fact that the only position information I have from the files is their origin point, which is usually located at the center but not always. As a result, when I place this origin point at Y = 0 (the grid's y position), sometimes part of the object ends up lower than the grid (taking into account rotation and resizing options).

Does anyone have any suggestions or solutions for this issue?

javascriptfilestlthree.js

Answer №1

To align the geometry of your stl model at the center:

geometry.center();

You can then position it so that its top touches the grid:

geometry.computeBoundingBox();
geometry.translate(0, -geometry.boundingBox.max.y, 0 );

Alternatively, you can align it so that its bottom touches the grid:

geometry.computeBoundingBox();
geometry.translate(0, -geometry.boundingBox.min.y, 0 );

Check out this jsfiddle example. The gray model shows the original position.

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

Is there a way for me to make my image source dynamically switch between 3-4 different images when hovered over?

I'm in the midst of a college project where I'm designing a clothing website. What I'm aiming for is to have the product image on the main feed change between 3-4 images of the same product with a quick transition when a user hovers over it. ...

javascripthtmlcssimagesrc

Tips for resolving the final item issue in Owl Carousel when using right-to-left (RTL)

Encountering a bug with the rtl setting in owl-carousel. When the rtl is applied to the slider and I reach the last item, the entire slider disappears! Here's the code snippet: var viewportWidth = $("body").innerWidth(); if (viewportWidth & ...

javascripthtmljquerycssowl-carousel

What is the process for incorporating an npm package into an HTML document?

Here is the code from my HTML file: <!DOCTYPE html> <head> ... </head> <body> ... <script src="script.js"></script> </body> This is what I have in my JavaScript file named script.js: import * as File ...

javascripthtmlnode.jsnpmfrontend

Organizing Checkbox Groups for Validation in Bootstrap

My form consists of 2 checkboxes and I only want to submit the form if at least one checkbox is checked. The current code requires both checkboxes to be checked, but I tried grouping them using the name attribute without success. How can I group checkbox ...

javascripthtmlvalidationcheckboxbootstrap-4

Issue with Vue2: encountering an error with the view-router component when attempting to utilize the <router-view> tag

Currently delving into Vue2 for the first time and facing hurdles with routes. Ever since I inserted <router-view></router-view> in index.html, an exception has been popping up: [Vue warn]: Failed to mount component: template or render functi ...

javascripthtmlwebpackvuejs2vue-router

Finding the precise source domain address using javascript

I'm having trouble retrieving the original domain address. I've attempted using document.location and $location, but haven't found a solution. Instead of the actual domain address, it returns the IP address. After trying window.location.anc ...

javascriptjqueryangularjs

Once the data is retrieved and the old image is deleted, attempting to upload the new image still results in the old image being displayed in the Next.js application with React Query

async function fetchTour() { const response = await api.get(`/tour/${router.query.slug}`); return response.data; } const { data: tourData, isLoading, isFetching, isTourError: isError, } = useQuery(['fetchTour', router.que ...

javascriptreactjsnext.jstanstackreact-query

The div element is finally loading properly after multiple clicks

I need some assistance with loading dynamic divs in Angular. I have created a button that adds new divs each time it is clicked in a specific area. However, once these new divs are added, they appear incorrectly: https://i.sstatic.net/sAE6q.png After add ...

javascripthtmlangulartypescriptprimeng

Having trouble importing modules in @react-three/fiber and @react-three/drei?

I'm struggling to integrate components from @react-three/drei because I keep encountering various import errors. No matter which component I attempt to use from @react-three/drei, these errors persist. For instance: ERROR in ./node_modules/three-stdli ...

reactjsthree.jsreact-three-fiberreact-fiberdrei

Tips for converting JSON String data to JSON Number data

Hello everyone, I am facing an issue with converting the 'review' value from String to a numerical format in JSON. This is causing problems when trying to perform calculations, leading to incorrect results. The scenario involves saving user comm ...

javascriptarraysjsontypescriptarraylist

When utilizing JSON data to bind HTML in Angular.js, the select option values may end up returning null

My challenge involves dynamically binding an HTML form stored as JSON into a view template using a custom directive. This HTML form includes a select tag and options that are generated dynamically using ng-repeat, with their models set using ng-model. Th ...

javascripthtmlangularjsjson

Emphasize the error message "Cannot find name" or "any" within the Vs Code

When using VS Code, I've noticed that when I make a mistake in Typescript it highlights the error as "Cannot find name" / any, while in Javascript it simply assigns "any" without highlighting. Here's an image for reference: https://i.sstatic.net/ ...

javascripttypescriptvisual-studio-code

Utilizing the WebSocket readyState to showcase the connection status on the application header

I am currently in the process of developing a chat widget with svelte. I aim to indicate whether the websocket is connected or not by utilizing the websocket.readyState property, which has the following values: 0- Connecting, 1- Open, 2- Closing, 3- Close ...

javascripthtmlreactjstypescriptsvelte

Manually incorporating multiple React components into a single container

I am currently in the process of upgrading an old JavaScript application that relies heavily on jQuery by introducing some React components. The existing code utilizes JS/jQuery to dynamically add elements to the DOM, and I am looking for a way to replace ...

javascriptjqueryreactjs

"Looking to log in with NextAuth's Google Login but can't find the Client Secret

I am attempting to create a login feature using Next Auth. All the necessary access data has been provided in a .env.local file. Below are the details: GOOGLE_CLIENT_ID=[this information should remain private].apps.googleusercontent.com GOOGLE_CLIENT_SECR ...

javascriptreactjstypescriptnext.jsnext-auth

Manage the sequence in which the various paths of an SVG element are displayed

Searching for a way to display an image in HTML with a rounded dashed border? Take a look at the example below: https://i.sstatic.net/YrCZS.png The number of dashes and their colors can be controlled, similar to what you see in WhatsApp's status tab ...

javascripthtmlcsssvg

Utilizing AJAX in Datatables- Effortlessly sharing a URL link to a designated page

I've recently encountered an issue while using Datatables and AJAX to retrieve data from my Rails server. The problem arises when I try to share a specific page (let's say page 2) with another user who is also using Datatables. Due to the paginat ...

javascriptruby-on-railsajaxdatatables

What is the best way to organize and group messages in JavaScript in order to push them to a subarray?

Having trouble coming up with a name for this question, but here's the issue I'm facing: I currently have an array in PHP containing several entries. Array ( [0] => stdClass Object ( [sender_id] => 0 [me ...

javascriptphpjquery

Search for documents in MongoDB that have a key that exists and the value is set to true

I'm currently working on developing a customized ACL for my application. The structure of my data is shown below: { _id: ObjectId("345sdf345dsf"), allowedResources: { "GET /auth": true, "POST /verify": false ...

javascriptjquerydatabasemongodb

Exploring the Functionality of PeerJS and Angular4: Controlling Camera and Microphone Access During Streaming

Currently, I am developing an Angular4 app that includes a video call module. The two modules I have created - host and client - are successfully enabling video calls between them. Now, I need to add two buttons for turning the camera and microphone on and ...

javascriptangularpeerjs