Within my Three.JS project, I am utilizing a Sphere Geometry that is defined as follows:
var radius = 1 ;
var widthSegments = 12;
var heightSegments = 12;
var geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
const material = new THREE.PointsMaterial({
color: 'white',
size: 0.01,
});
Currently, I desire to dynamically adjust the property widthSegments over time through a function implementation. Here is my attempt:
var ChangeWidth = function (){
var time = Date.now() * 0.0005;
widthSegments = Math.sin(time * 0.7) * 30;
}
Subsequently, I added this function to my main update function:
function update()
{
requestAnimationFrame( update );
renderer.render( scene, camera );
animate();
ChangeWidth();
}
However, upon testing, no visible changes have occurred. Is it feasible to alter the value of widthSegments and consequently modify the geometry variable accordingly?
UPDATE
A revised approach involves deleting and recreating the geometry with an updated widthSegments value:
function update() {
scene.add(points);
requestAnimationFrame(update);
renderer.render(scene, camera);
}
update();
while (widthSegments < 60){
// Initially, the older geometry is removed
var DestroyGeometry = function() {
scene.remove(points);
points.geometry.dispose();
}
DestroyGeometry();
// A new geometry is then created
const newGeometry = new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments);
points = new THREE.Points(newGeometry, material);
// Incrementing the widthSegments value
widthSegments += 0.5;
// Rendering the new geometry
var Recreate = function() {
scene.add(points);
requestAnimationFrame(update);
renderer.render(scene, camera);
}
Recreate();
}
Despite implementing these changes, the functions DestroyGeometry() and Recreate() do not appear to be functioning correctly. Is there a specific reason why they are placed within a while loop configuration?