Trouble with object scaling / scene.remove();

Question

I'm currently trying to make an animation kinda thing in three.js and for some reason I'm having trouble with scaling objects in the update function, but I don't have issues with opacity, position ect. I'm not sure if I'm just using the wrong commands or whatever but regardless,

I've tried multiple things such as scale, material.scale, geometry.scale, ect. I'm just confused I'm probably just missing obvious things but after googling diffrent solutions and using scale.set(scalex, scaley, 0.000000000001) and just putting a variable in the if states to loop and update the scalex and scaley, but it still doesn't update.

var bpm = 124;
var ring;
var ringgeometry = new THREE.BoxGeometry( 1080/10, 1080/10 , 0 );
var ringmaterial = new THREE.MeshBasicMaterial({
 map: new THREE.TextureLoader().load("RING.png"),
 blending: THREE.screenBlending,
 transparent: true, opacity: 1
});  
var clock = new THREE.Clock;

function update() {

 if(clock.elapsedTime < 377){ ticker = clock.elapsedTime * (songBPM / 60);
 bpm = Math.round(ticker), console.log(bpm), console.log(sect) };
 clock.getDelta();

 if(bpm >= 34 && bpm <= 40){
  ring = new THREE.Mesh( ringgeometry, ringmaterial);
  if(bpm == 34){ scene.add(ring) };
  /////////////////////////////////
  if(bpm >= 34 && bpm <= 40){ ringgeometry.scale.x += 0.1, ringgeometry.scale.y += 0.1 }
  ring.position.set(0, 0, 0);
  ////////////////////////////////
  if(bpm >= (32 + 1) && bpm <= (32 + 10)){ ringmaterial.opacity -= 0.01 };
 }
 if(bpm == 40 && bpm <= 42){ scene.remove(ring) };
}

renderer.setAnimationLoop(() => {
 update();
 composer.render(scene, camera);
});

function render(){ composer.render() };

This code only puts the ring into the scene at the default scale, and doesn't remove it from the composition, decrease the opacity or scale it.

I've also been having to find awkward solutions to removing things from scenes because scene.remove() doesn't seem to be working half the time and ends up lagging my scene unless I manually se the opacity to 0 later on.

Thanks in advance and sorry if it's an obvious solution.

Answer 1

threejs.org/docs/index.html#api/en/core/Geometry.scale is the solution.

if(bpm >= 33 && bpm <= (33+6)){
  if(bpm == 33){ ring = new THREE.Mesh( ringgeometry, ringmaterial), scene.add(ring) };
  if(bpm >= 33 && bpm < 33+9){ ringgeometry.scale(1.01,1.01,1), ringmaterial.opacity -=0.008 }
  ring.position.set(0, 0, -70)};
if(bpm == (33+4)){ringgeometry.scale(-10000,-10000,1)};

answer by prisoner849