Тройс | Как анимировать радиус (RingGeometry)
Как я могу анимацию атрибута innerRadius THREE.RingGeometry()
в three.js используя tween.js. Я не хочу масштабировать кольцо, я хочу обновить геометрию.
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);
Вам нужно будет взглянуть на морфинг вершин, на этом сайте есть отличные примеры для разных ситуаций:
https://stemkoski.github.io/Three.js/Graphulus-Surface.html
https://stemkoski.github.io/Three.js/
Посмотрите через образцы морфинга, а также..