我目前正在通过多次调用此函数在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);
}
我想使用tween.js设置shape
的绘图动画,但我不知道如何使用补间缓动而不是绘制段的absarc?是否可以将开头的absarc设置为零,然后在补间内绘制?
为了让您了解我想要的动画,请查看此网站和动画http://canvasjs.com/html5-javascript-pie-chart/ 我希望饼图逐个绘制每个段。目前,饼图被绘制并立即渲染,因此没有动画。