三个js |如何补间半径（RingGeometry）

Question

如何使用 tween.js 在 three.js 中补间 THREE.RingGeometry() 的 innerRadius 属性。我不想缩放环，我想更新几何。

Answer 1

您将需要查看变形顶点，此网站针对不同情况提供了很好的示例：

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

也查看变形示例..

Answer 2

如果能给点帮助的话可能是一个答案。
1 - 给戒指起个名字，
2 - 创建一个函数来查找、删除和重绘环
3 - 并使用 Tween.js 或 setInterval 使用函数来设置动画。
类似于：

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);

三个js |如何补间半径（RingGeometry）

Threejs | How to tween Radius (RingGeometry)

three.js

tween.js