I'm working on animating a sphere made up of dots, and I'm facing a challenge. I want each dot to remain on the surface of the sphere while it resizes. Currently, I am attempting to scale the mesh or geometry of a specific point on the surface, but I'm encountering an issue where the dot seems to disappear beneath the sphere.
const dotGeometry = new three.CircleGeometry(2, 5)
const vector = new three.Vector3()
vector.setFromSphericalCoords(radius, point.phi, point.theta)
// Ensuring the dot faces the target from the origin
// to maintain the correct slope on the sphere's surface.
dotGeometry.lookAt(vector)
// Moving the geometry to the specified point.
dotGeometry.translate(vector.x, vector.y, vector.z)
const dot = new three.Mesh(dotGeometry, dotMaterial)
scene.add(dot)
{
// Animation logic within the render function
const fi = 3 * time * 0.001
const r = Math.abs(Math.asin(Math.sin(fi)))
dot.scale.set(r, r, r)
}