javascript - two.js 使圆柱体做圆周旋转

Question

我必须像下图一样画。

我已经构建了圆柱体并将它们放在一个圆圈中，但是当我尝试旋转它们时它不起作用。

代码如下。当我尝试旋转它时，它会围绕它自己的旋转（如附加图像）。如何围绕中心点旋转，以便每个圆柱体的底部都指向中心。

var two, center;

function init() {
    var elem = document.getElementById('draw-shapes');
    var params = { width: window.innerWidth, height: window.innerHeight };
    two = new Two({ fullscreen: true }).appendTo(elem);
    center = { x: params.width / 2, y: params.height / 2 };
}

function drawLine(position, color) {
    let xAxis = two.makeLine(position.x1, position.y1, position.x2, position.y2);
    xAxis.linewidth = 3;
    xAxis.stroke = color;
}

function drawAxis() {
    drawLine({ x1: center.x, y1: center.y, x2: window.innerWidth, y2: center.y }, 'blue');
    drawLine({ x1: center.x, y1: center.y, x2: center.x, y2: 0 }, 'red');
}

function drawCircle(position, radius, strokeColor) {
    var circle = two.makeCircle(position.x, position.y, radius);
    circle.noFill();
    circle.stroke = strokeColor; // Accepts all valid css color
    circle.linewidth = 2;
}

function drawCurveLine(radius, range, position) {
    let points = [];

    for (let i = range.start; i <= range.end; i++) {
        let x = position.x + Math.sin(i * (Math.PI / 180)) * radius;
        let y = position.y + Math.cos(i * (Math.PI / 180)) * radius;
        points.push(new Two.Anchor(x, y));
    }
    return points;
}

function main() {
    init();
    buildOrbitWithCylinder(center, 120);
    two.update();
}

function buildOrbitWithCylinder(position, radius) {
    for (let i = 0; i <= 360; i++) {
        let x = position.x + Math.sin(i * (Math.PI / 180)) * radius;
        let y = position.y + Math.cos(i * (Math.PI / 180)) * radius;
        let cylinder = drawCylinder({ x: x, y: y });
        cylinder.rotation = 0.1 * i;
        i = i + 30;
    }

}

function drawCylinder(position) {
    let points = [];
    let radius = 12;
    let height = 35;
    points = drawCurveLine(radius, { start: -90, end: 270 }, position);

    points.push(new Two.Anchor(position.x - radius, position.y + height));
    points = points.concat(drawCurveLine(radius, { start: -90, end: 90 }, { x: position.x, y: position.y + height }));
    points.push(new Two.Anchor(position.x + radius, position.y));
    let cylinder = two.makePath(points, true);
    cylinder.stroke = 'blue'
    cylinder.linewidth = 2;
    cylinder.noFill();
    return cylinder;
}

main();