0

我目前正在通过多次调用此函数在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？是否可以将开头的absarc设置为零，然后在补间内绘制？

为了让您了解我在想什么动画，请查看此站点和此处的动画http://canvasjs.com/html5-javascript-pie-chart/ 我希望饼图能够逐个绘制每个段一。目前，饼图被绘制并立即渲染，因此没有动画。

4

0 回答 0