小编Zac*_*Zac的帖子

我正在尝试构建 Threejs 元素周期表螺旋视图的 Flutter Web 版本（请参见此处：https: //mrdoob.com/lab/javascript/thirdjs/css3d/periodictable/并单击“Helix”）

目前，我将所有元素图块放在一个堆栈中，并通过矩阵变换来定位和旋转它们。见下面的代码：

  @override
  Widget build(BuildContext context) {
    double initialRotateX = (widget.atomicNumber - 1) *
        (math.pi / Constants.numberOfElementsPerHalfCircle);
    return Transform(
      transform: Matrix4.identity()
        ..translate(
          math.sin((widget.atomicNumber - 1) *
                  (math.pi / Constants.numberOfElementsPerHalfCircle)) *
              Constants.radius,
          widget.atomicNumber * 4,
          -math.cos((widget.atomicNumber - 1) *
                  (math.pi / Constants.numberOfElementsPerHalfCircle)) *
              Constants.radius,
        )
        ..translate(Constants.elementCardHalfSize)
        ..rotateY(-initialRotateX)
        ..translate(-Constants.elementCardHalfSize),
      child: Container(
        decoration: BoxDecoration(
            color: Constants.elementCardColor,
            border: Border.all(width: 1, color: Colors.white.withOpacity(0.3))),
        child: SizedBox(
          width: Constants.elementCardWidth.toDouble(),
          height: Constants.elementCardHeight.toDouble(),
          child: ElementText()
          
        ),
      ),
    );

然后，所有这些卡片都被放置在另一个类的堆栈小部件内，并且该小部件被旋转，如下所示：

return AnimatedBuilder(
      animation: …