我如何THREE.RingGeometry()
使用tween.js补间three.js中的innerRadius属性。我不想缩放环,我想更新几何。
如果可以给您帮助的想法可能是一个答案。
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);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句