How can I generate spheres in threejs with varying radii while all passing through the shared point located at coordinates (0,0,200)?

Question

How can I generate spheres in threejs with varying radii while all passing through the shared point located at coordinates (0,0,200)?

Is there a way to generate spheres in threejs where the radius increases while always passing through a single point at 0,0,200? This would allow the origin of each new sphere to move along the z-axis.

Appreciate any help, AriemWebgl

javascript three.js

Answer 1

Answer №1

To create a "parent" Object3D and connect the spheres to it, simply use the following code:

var sphereParent = new THREE.Object3D();
var numOfSpheres = 8;
for(var j = 0 ; j < numOfSpheres; j++)
{
   var radiusSize = 10 + j;
   var sphereGeo = new THREE.SphereGeometry( radiusSize, 16, 8 );
   var sphereMat = new THREE.MeshLambertMaterial( { color: 0x0000ff } );
   var nextSphere = new THREE.Mesh( sphereGeo, sphereMat );
   sphereParent.add( nextSphere );
}
sphereParent.position.set(0,0,200);
scene.add(sphereParent);

Answer 2

To create a "parent" Object3D and connect the spheres to it, simply use the following code:

var sphereParent = new THREE.Object3D();
var numOfSpheres = 8;
for(var j = 0 ; j < numOfSpheres; j++)
{
   var radiusSize = 10 + j;
   var sphereGeo = new THREE.SphereGeometry( radiusSize, 16, 8 );
   var sphereMat = new THREE.MeshLambertMaterial( { color: 0x0000ff } );
   var nextSphere = new THREE.Mesh( sphereGeo, sphereMat );
   sphereParent.add( nextSphere );
}
sphereParent.position.set(0,0,200);
scene.add(sphereParent);

Answer 3

Answer №2

In my opinion, all it takes is the creation of a few meshes and adjusting their positions:

let numberOfCylinders = 10;
for(let j = 0 ; j < numberOfCylinders; j++){
   let height = 15 + (3*j);//increment the height based on the counter
   let cylinder = new THREE.Mesh( new THREE.CylinderGeometry( 5, 5, height, 32 ), new THREE.MeshPhongMaterial( { color: 0xee3333, shininess: 100, wireframe:false } ) );
   cylinder.position.z = -100;//or cylinder.position.set(0,0,-100);
   scene.add( cylinder );
}

Answer 4

In my opinion, all it takes is the creation of a few meshes and adjusting their positions:

let numberOfCylinders = 10;
for(let j = 0 ; j < numberOfCylinders; j++){
   let height = 15 + (3*j);//increment the height based on the counter
   let cylinder = new THREE.Mesh( new THREE.CylinderGeometry( 5, 5, height, 32 ), new THREE.MeshPhongMaterial( { color: 0xee3333, shininess: 100, wireframe:false } ) );
   cylinder.position.z = -100;//or cylinder.position.set(0,0,-100);
   scene.add( cylinder );
}

Answer 5

Answer №3

This age-old conundrum may have been resolved long ago, but since it remains unanswered, let's shed some light on it for future readers...

The number of spheres with a radius R sharing a common surface point P is equivalent to the surface area of a sphere with a radius R centered at P, which is 4πR². This is because their centers are points on the same sphere centered at P:

In scenarios like the one presented in this question, involving internally tangent spheres, mathematical calculations reveal that the center of the updated sphere (C₁) will lie along the direction between the shared point (P) and the original sphere's center (C₀), at a distance equal to the difference in their radii (R₁ - R₀) from the latter (C₀):

When dealing with positional and directional vectors, it's important to understand:

To move a position by a certain distance in a particular direction, we add the product of the direction vector and the distance to the original position.
A direction between two positions can be calculated as the normalized difference between the second and first position vectors.

Hence,

position(C₁) = position(C₀) + direction(P, C₀) * (R₁ - R₀)

. Alternatively, for a more concise solution using Three.js, we can directly update via

position(C₀) += normalize(C₀ - P) * (R₁ - R₀)

and scale by R₁ / R₀, as shown below:

sphere.position.addScaledVector(sphere.position.clone().sub(point).normalize(), newradius - oldradius);
sphere.scale.setScalar(newradius / oldradius);

Note: Circles were used in the illustrations for simplicity, but imagine them as cross sections through the spheres' midpoints if it helps. The method described above applies to any point in any given position—it doesn't have to be restricted to the Z-axis or even confined to the sphere surfaces.

Answer 6

This age-old conundrum may have been resolved long ago, but since it remains unanswered, let's shed some light on it for future readers...

The number of spheres with a radius R sharing a common surface point P is equivalent to the surface area of a sphere with a radius R centered at P, which is 4πR². This is because their centers are points on the same sphere centered at P:

In scenarios like the one presented in this question, involving internally tangent spheres, mathematical calculations reveal that the center of the updated sphere (C₁) will lie along the direction between the shared point (P) and the original sphere's center (C₀), at a distance equal to the difference in their radii (R₁ - R₀) from the latter (C₀):

When dealing with positional and directional vectors, it's important to understand:

To move a position by a certain distance in a particular direction, we add the product of the direction vector and the distance to the original position.
A direction between two positions can be calculated as the normalized difference between the second and first position vectors.

Hence,

position(C₁) = position(C₀) + direction(P, C₀) * (R₁ - R₀)

. Alternatively, for a more concise solution using Three.js, we can directly update via

position(C₀) += normalize(C₀ - P) * (R₁ - R₀)

and scale by R₁ / R₀, as shown below:

sphere.position.addScaledVector(sphere.position.clone().sub(point).normalize(), newradius - oldradius);
sphere.scale.setScalar(newradius / oldradius);

Note: Circles were used in the illustrations for simplicity, but imagine them as cross sections through the spheres' midpoints if it helps. The method described above applies to any point in any given position—it doesn't have to be restricted to the Z-axis or even confined to the sphere surfaces.

How can I generate spheres in threejs with varying radii while all passing through the shared point located at coordinates (0,0,200)?

Answer №1

Answer №2

Answer №3

Similar questions

Issue: Unable to utilize import statement outside a module as per the guidelines of the vue-test-utils official tutorial

Will cancelling a fetch request on the frontend also cancel the corresponding function on the backend?

Reposition div when clicked

Comparing two Objects in JavaScript results in automatic updates for the second Object when changes are made to the first

The onClick event for "history.go(0)" is functional in Internet Explorer, but it does not work in Mozilla Firefox. What can be done to address this problem specifically for Mozilla browser?

What is the method for displaying map tooltips by default rather than on mouseover?

Is there a way to successfully submit multiple locations, each separated by commas, through the multipart form?

What is the best way to run an external JavaScript file at regular intervals?

Update a specific element within Angular framework

How can AngularJS handle multiple routes using unique templates while sharing the same controller?

Exploring jQuery's AJAX capabilities in handling cross-domain requests and implementing Basic Authentication

Trigger Modal using PHP/JavaScript

employing strings in passing functions as arguments

difficulty arises when attempting to invoke a viewmodel from another viewmodel inside a ko.computed function

Deactivate DropDownList within Update Panel with JQuery

When using ReactJS, hovering over a row in a table should trigger a change in the background color of the corresponding row in another table with the same index

Retrieve information from arrays within objects in a nested structure

Javascript - Execute function after all nested forEach loops have finished running

Duplicating an array retrieved through a jQuery ajax request

Strategies for capturing POST data sent to a JavaScript webpage