Threejs | How to tween Radius (RingGeometry)

Question

How can I tween the innerRadius attribute of THREE.RingGeometry() in three.js using tween.js. I don't want to scale the ring, I want to update geometry.

Answer 1

You will need to look at morphing the vertices, This website has great examples for different situations:

https://stemkoski.github.io/Three.js/Graphulus-Surface.html
https://stemkoski.github.io/Three.js/

Have look through the morphing samples aswell..

Answer 2

May be an answer if it can give idea to help.
1 - Give a name to the ring,
2 - Create a function to find, remove and redraw the ring
3 - and with Tween.js or setInterval use the function to animate.
Something like :

var rStart = 100;
var rStep = 10;
var ep = 50;

//create circle
var geometry = new THREE.RingGeometry( rStart, rStart + ep, 32,3,0, Math.PI * 2 );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide } );
var ring = new THREE.Mesh( geometry, material );
ring.name = 'the_ring';
scene.add( ring );


// function to find ring, remove and redraw
function grow(i,rStart,rStep,ep){

var ringToRemove = 'the_ring';
var ringToRemoveSelected = scene.getObjectByName(ringToRemove);
scene.remove(ringToRemoveSelected);

var newRadius = rStart + ( rStep * i);

var geometry = new THREE.RingGeometry( newRadius , newRadius + ep , 32,3,0, Math.PI * 2);
var material = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide } );

var ring = new THREE.Mesh( geometry, material );
ring.name = 'the_ring';
scene.add( ring );

}

//and animate
var i = 0;
setInterval(function () { 

i++; 
if(i < 100){
grow(i,rStart,rStep,ep);
}
}, 100);