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

Threejs |如何补间半径（RingGeometry）

2 个答案: