Three.js анимация с использованием tweenjs
В настоящее время я создаю круговую диаграмму в three.js, вызывая эту функцию несколько раз, которая создает для каждого данных один сегмент и передает начальный угол и конечный угол для конкретного сегмента.
createSegment(radius, angleStart, angleEnd) {
let extrudeOptions = {
curveSegments: 50,
steps: 1,
amount: 1.0,
bevelEnabled: false,
};
let shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.absarc(0, 0, radius, angleStart, angleEnd, false); //false: to not go clockwise (otherwise it will fail)
shape.lineTo(0, 0);
let segmentGeom = new THREE.ExtrudeGeometry(shape, extrudeOptions);
let segmentMat = new THREE.MeshPhongMaterial({
color: Math.random() * 0xffffff,
shading: THREE.SmoothShading,
specular: 0xffffff,
shininess: 1.0,
});
return new THREE.Mesh(segmentGeom, segmentMat);
}
Я хотел бы оживить рисунок shape
с tween.js, но я не знаю, как я мог бы использовать замедление анимации вместо absarc, который рисует сегмент? Можно ли установить абсарк в начале на ноль, а затем нарисовать внутри анимации?
Чтобы дать вам представление о том, о какой анимации я думаю, просмотрите этот сайт и анимацию здесь http://canvasjs.com/html5-javascript-pie-chart/ Я хочу, чтобы круговая диаграмма рисовала каждый сегмент по одному один. На данный момент круговая диаграмма рисуется и отображается мгновенно, поэтому анимации нет.