Three.js: Spherical boundary of an object that has been resized

When working with a collection of 3D shapes such as pyramids, cubes, octahedrons, and prisms, I encountered an issue with building described spheres around them. While it's straightforward to create the spheres using geometry.boundingSphere due to its radius, I noticed that scaling an object does not update the bounding sphere accordingly. Is there a way to adjust the bounding sphere relative to the scale factor? This question pertains to Three.js version 0.129.

const { position } = entity.object3D;
const mesh = entity.getObject3D('mesh') as THREE.Mesh;

mesh.geometry.computeBoundingSphere();

const { radius } = mesh.geometry.boundingSphere;

createSphere(radius, position);

Answer №1

The geometry.boundingSphere property is a representation of the geometry itself. It's important to note that when working with multiple meshes, each scaled differently, sharing the same geometry, it's crucial to maintain the original bounding sphere of the geometry and then calculate individual bounding spheres for each mesh.

An issue that arises when scaling the bounding sphere is the potential for unequal scaling along the x, y, and z axes, or even negative values which could distort the shape into more of a spheroid than a sphere, complicating mathematical calculations.

To address this, recalculating the bounding sphere based on the updated world transformation matrix of the mesh is recommended. Using the world matrix is advised as ancestral influences on scale can affect the final result unpredictably.

// Given:
// (THREE.Mesh) yourMesh

// Clone the geometry 
let geoClone = yourMesh.geometry.clone() // Though memory-intensive, it simplifies the process

// Apply the world transformation to the clone (updating vertex positions)
geoClone.applyMatrix4( yourMesh.matrixWorld )

// Convert vertices into Vector3s (memory intensive)
let vertices = []
let pos = geoClone.attributes.position.array
for( let i = 0, l = pos.length; i < l; i += 3 ){
  vertices.push( new THREE.Vector3( pos[i], pos[i+1], pos[i+2] ) )
}

// Create and assign the mesh's bounding sphere
yourMesh.userData.boundingSphereWorld = new THREE.Sphere()
yourMesh.userData.boundingSphereWorld.setFromPoints( vertices )

This process establishes a world-aligned bounding sphere specific to your mesh. If you require a sphere based on local transformations, a similar approach using the local yourMesh.matrix can be applied. Be aware that in this case, the center of the sphere will align with the mesh's local transformation/rotation, not just its scale.

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

Guide to concealing List elements from the Search Filter when the search input field is emptied

I am facing a challenge with an HTML list of items. Here is the structure: <ul id="fruits"> <li><a href="#">Mango</a></li> <li><a href="#">Apple</a></li> <li><a href="#">Grape</a>& ...

Next.js directs API requests to the root URL

I'm currently working with an API handler pages/api/[slug]/[uid].ts My goal is to redirect the requests to the main root of my application, specifically: http://localhost:3000/[slug]/[uid] What steps do I need to take in next.config in order to mak ...

Is it possible to provide unrestricted support for an infinite number of parameters in the typing of the extend function from Lodash

I am utilizing the "extend" function from lodash to combine the objects in the arguments as follows: import { extend } from 'lodash'; const foo1 = { item: 1 }; const foo2 = { item: 1 }; const foo3 = { item: 1 }; const foo4 = { item: 1 }; const f ...

Switch between two tabs with the convenient toggle button

I have implemented 2 tabs using Bootstrap as shown below: <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">CLient</a></li> <li role="presentatio ...

I encounter obstacles when trying to execute various tasks through npm, such as downloading packages

Currently, I am facing an issue while trying to set up backend development using node.js on my personal computer. The problem lies with the npm command as it is not functioning correctly. Despite successfully installing a file without any errors, I am unab ...

Unable to apply inline styles to React Component

My Carousel component is supposed to return a collection of carousel boxes, each styled with a specific property. However, I am facing an issue where the style property is not being applied to the returning divs. How can I resolve this? I noticed that whe ...

Is there a way to implement JavaScript within my Blazor server razor page to modify the styling of a blazor bootstrap button after a form submission?

I am currently working on a Blazor server application where I am looking to add a special functionality. My goal is to have the accordion header change to red if validation fails, meaning if there is no input in the field. view image here //index.razor pa ...

Showing particular URL text upon opening a new window using JavaScript

I've encountered an intriguing scenario. In my application, there's a feature that triggers a new window/tab to open when a button is clicked. Upon opening, a predefined HTML page is shown to the user with a specific URL set. I'm curious abo ...

When attempting to print a Rectangle on my webpage using JavaScript and taking user input, I encountered an error stating that 'str' is not defined

I'm trying to implement a feature where clicking on the "try it" button will prompt the user for the number of lines and then print that many lines in the form of a rectangle. However, when I run my code, nothing appears on the DOM and there is an err ...

Zod vow denial: ZodError consistently delivers an empty array

My goal is to validate data received from the backend following a specific TypeScript structure. export interface Booking { locationId: string; bookingId: number; spotId: string; from: string; to: string; status: "pending" | "con ...

How can I effectively refresh the provider_token / access token for Discord in NextJS with Supabase Auth?

Currently, I have encountered an issue with my NextJs project using Supabase Auth for authentication. I am currently utilizing the Discord provider and everything works fine initially. However, after a few minutes, the session object gets updated and the p ...

Exploring the Syntax of React

As I am still fairly new to react and have a basic understanding of Javascript. Following a tutorial, everything was clear until the instructor moved forward. Now, when I go back over the material, I find myself struggling to grasp this concept. render() ...

How big should the placeholder image be for the image area?

How can I create a loading image to replace a .gif while it loads? I need a placeholder image of about 325x325 (same size as the gif) to keep content in place. I've attempted using background: url() without success and haven't explored JS/jQuery ...

What could be the reason behind the disappearance of the lines in my table that was created with the help of HTML, CSS, and JavaScript?

When I added the Modal trigger, the table lines changed. I suspect it has to do with the buttons in the table. I'm new to HTML/CSS/JS so this whole experience is quite different for me. Any advice or tips for future projects would be greatly appreciat ...

The text fields keep duplicating when the checkbox is unchecked

There are check boxes for Firstname, Lastname, and Email. Clicking on a checkbox should display the corresponding input type, and unchecking it should remove the input field. I am also attempting to retrieve the label of the selected checkbox without succ ...

The issue arises when attempting to execute an Ajax function within a JQuery append method, causing malfunction

My JQuery append function is calling an ajax function within the onChange method. Here is my code snippet: var data='<?php echo $data; ?>'; var tambah=1; var txt=1; function add_fullboard_dalam_kota(){ function showU(str) { ...

What are the benefits of declaring variables with JSON in a JavaScript file instead of simply reading JSON data?

Lately, I've been delving into the world of leaflets and exploring various plugins. Some of the plugins I've come across (like Leaflet.markercluster) utilize JSON to map out points. However, instead of directly using the JSON stream or a JSON fi ...

Error encountered during the prerendering process on Vercel's Next.js build

While trying to compile my website on Vercel, I encountered a pre-rendering error during export. Does anyone know why this is happening and can provide assistance? Here is the link to my GitHub repository where all the code is stored: https://github.com/M ...

Personalized labels for your JQuery Mobile sliders

Struggling to make this work correctly, I aim to introduce tick marks and custom labels into jQuery Mobile's slider widget. My goal is to add tick markers at 0, 25, 50, 75, and 100 with a unique string above each tick. Additionally, I want these label ...

javascript loop that runs on every second element only

After completing an ajax query, the following JavaScript code is executed. All of my images are named "pic". <script type="text/javascript> function done() { var e = document.getElementsByName("pic"); alert(e.length); for (var i = 0; ...