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/ Я хочу, чтобы круговая диаграмма рисовала каждый сегмент по одному один. На данный момент круговая диаграмма рисуется и отображается мгновенно, поэтому анимации нет.

0 ответов

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