Three.js使用tweenjs

时间:2016-12-08 14:54:16

标签: javascript three.js tween 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);
}

我想使用tween.js设置shape的绘图动画,但我不知道如何使用补间缓动而不是绘制段的absarc?是否可以将开头的absarc设置为零,然后在补间内绘制?

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

0 个答案:

没有答案