Imported sphere contained within a three.js box3

Seeking guidance: I am trying to figure out how to determine the dimensions of my 3D objects that I have imported. Currently, I am using the code snippet below:

var box = new THREE.Box3().setFromObject(obj);

This code allows me to calculate the boxes for my objects and even merge them together if needed.

However, my challenge lies with these two imported objects: https://i.sstatic.net/dcjw2.jpg

The apparent solution would involve computing the left and right sphere boxes and then combining them. But since both objects were imported using stlloader, which seems to merge everything into one mesh, I am unsure if this approach is feasible.

Therefore, I have the following questions: 1. How can I calculate a box that represents the shape of a sphere for my sphere object? 2. Is this operation even achievable for my stl object? (I plan to test this once I have an answer for question 1)

Edit: It seems that Question 1 should involve using .computeBoundingSphere. Is there a way to implement this effectively?

javascriptobjectthree.js3d

Answer №1

  1. How do I calculate a box in the shape of a sphere for my sphere object?

When using three.js, you have the option of two different bounding volumes. THREE.Box3 represents an axis-aligned bounding box (AABB), while THREE.Sphere represents a bounding sphere. If you require a box shaped like a sphere, you should utilize THREE.Sphere.

  1. Can I achieve this for my STL object?

The setFromObject() method is only available for THREE.Box3. Nonetheless, you can calculate the bounding sphere with 

THREE.BufferGeometry.computeBoundingSphere()
. Remember, this sphere is in local space, but you can convert it to world space using THREE.Sphere.applyMatrix4() with the object's world matrix.

Is there a way to visualize this?

Although there isn't a built-in helper class for bounding spheres, you can easily create a visual representation using a mesh based on THREE.SphereBufferGeometry. For example:

const geometry = new THREE.SphereBufferGeometry( boundingSphere.radius );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

const mesh = new THREE.Mesh( geometry, material );
mesh.position.copy( boundingSphere.center );
scene.add( mesh );

three.js R109

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

How to render specific components in Next.js instead of rendering the entire page using React

Currently, I am exploring how to utilize next.js to display a component within a layout upon clicking a link. The layout structure I have is as follows: import * as React from "react" import { Box } from "@chakra-ui/layout" import { L ...

javascriptreactjsnext.jsnext-router

Whenever the selected option in an HTML dropdown menu is modified, a corresponding input field should be automatically adjusted

Within my Rails application, I am facing a challenge related to updating the value of a text_field when a user chooses a different option from a select tag. The select tag is populated from a model which contains a list of countries for users to choose fro ...

javascriptjqueryruby-on-railsrubyajax

I recently started delving into React Native and am currently exploring how to implement custom fonts in my application. However, I have encountered an error that is preventing me from successfully integrating

The Issue: The error I encountered only appeared after including font-related code (such as importing from "expo-font" and using "AppLoading" from "expo", and utilizing the "Font.loadAsync()" function). Error: Element type is invalid: expected a string (fo ...

javascriptreactjsreact-nativefontsexpo

When incorporating reduce into your code, remember to expect an undefined

Imagine you have an array like this: const novels = [ { id: 1, name: 'The Da Vinci Code', genre: 'Mystery', author: { name: 'Dan Brown', birthYear: 1964, }, releaseYear: 2003, }, { ...

javascriptreduce

After reaching the conclusion, the code restarts

Any ideas on how to reset this code every 10-20 seconds? I'm struggling to find a solution! I'm new to coding, so any assistance would be greatly appreciated. Here's the code: var items = document.getElementsByClassName('btn-primary n ...

javascript

Can you explain the significance of the ColSpan property in the Material UI TablePagination?

Why is ColSpan used in this code snippet? Reference: https://material-ui.com/components/tables/#table Check for the arrow symbol <TableFooter> <TableRow> <TablePagination rowsPerPageOptions={[5, ...

javascriptreactjshtml-tablematerial-ui

Is it possible to reference the prior value of a computed Angular signal in any way?

Is it possible to dynamically add new values from signal A to the existing values in signal B, similar to how the scan operator works in RxJS? I am looking for something along the lines of signalB = computed((value) => [...value, signalA()]). Any sugg ...

javascriptangulartypescriptrxjssignals

Submitting an mvc partial view form to send data from the parent view

I am currently working on a MVC 5 App where I have a Parent View that includes a Partial View, allowing users to load images. Upon submitting, the Parent view calls a .Ajax function defined within it, which in turn calls a Method/Controller. My requireme ...

javascriptjqueryajaxasp.net-mvcparentviewcontroller

Struggling to get your HTML to Express app Ajax post request up and running?

I’m currently in the process of creating a Node Express application designed for storing recipes. Through a ‘new recipe’ HTML form, users have the ability to input as many ingredients as necessary. These ingredients are then dynamically displayed usi ...

javascriptjquerynode.jsajaxexpress

What is the best way to utilize a single component for validating two other components?

I am encountering an issue with my components setup. I have three components in total: GalleryAddComponent, which is used to add a new element, GalleryItemComponent, used to edit an element, and FieldsComponent, the form component utilized by both GalleryA ...

javascripthtmlangulartypescriptvalidation

The MUI toggle button does not indicate the selected input despite being configured with a value

Although the MUI toggle successfully registers user input, the selected option is not highlighted when clicked. I have included a value parameter and implemented an onChange function to update the value parameter on change. Initially, it does highlight " ...

javascriptreactjsmaterial-ui

Switching the namespace for ASP.NET .ASMX web services: Is it possible?

Seeking a solution to call an ASP.NET .asmx webservice from JavaScript using a namespace different from the default one set by Visual Studio during creation. Upon using the Visual Studio wizard to generate a webservice named Hello in the WebServices folde ...

javascriptasp.netweb-servicesasmx

"The NextJS FetchError that occurred was due to a timeout issue (ET

After successfully deploying my project on CentOS 7, I set up port forwarding to access it through port 8080. This means that in order to use the site, you had to navigate to it using the IP followed by :8080. Below is the NGINX configuration I utilized fo ...

javascriptnginxnext.jsfetch

Ensure that every route is prefixed with /api

Is there a way to set all routes accepted by Express to start with /api without explicitly defining it? Current: this.app.get('/api/endpoint-A', (req, res) => { return res.send('A'); }); this.app.get('/api/endpoint-B', ...

javascriptexpress

Formulate a CANNON entity utilizing the THREE.Mesh technique

I have a THREE.js plane where the points are manipulated using Perlin noise to create terrain. I now need to implement physics for the camera to prevent it from falling through the plane. My goal is to develop a function that can extract the vertices and ...

javascriptthree.jscannon.js

What causes data to update in a Vue template but not in the JavaScript portion of the code?

The topic in the template section updates when its value in the parent component changes, however, the same value in the script part remains the initial value it received at search_params.set('param1', this.topic);. Everything else in the code is ...

javascriptvue.jscomponentsprop

The `process` variable is not recognized in a Vue/TypeScript component

I've encountered an issue trying to use .env variables in my Vue app. When I ran npm install process, the only syntax that didn't result in an error when importing was: import * as process from 'process'; Prior to this, I received the ...

javascripttypescriptvue.jsenvironment-variables

What is the best way to extract plain text with JQuery?

I found this Html code snippet: <div class="form-group row"> <label id="lb_size" class="col-lg-3 col-form-label"> <span class="must-have">****</span> Size </label> </div> My goal is to ext ...

javascriptjqueryhtml

jQuery plugin stops functioning properly following the use of the jQuery display block method

In my project, I am exploring the use of divs as tabs with jQuery. Within these divs, I also want to incorporate another jQuery plugin. Currently, I have manually created these div tabs using jQuery and set the default style for second and subsequent divs ...

javascriptjqueryhtmlcss

Exploring the Power of Namespaces in ECMAScript 6 Classes

My goal is to create a class within the namespace TEST using ECMAScript 6. Previously, I achieved this in "old" JavaScript with: var TEST=TEST || {}; TEST.Test1 = function() { } Now, I am attempting the following approach: var TEST=TEST || {}; class TES ...

javascriptclassnamespacesecmascript-6