Тройс | Как анимировать радиус (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/

Посмотрите через образцы морфинга, а также..

Другие вопросы по тегам