SVG 3D：作成、回転、アニメーション化

1週間以上前、Telegramコンテストの一環として、svg、数式、最適化、アニメーションの「魔法の世界」に突入しなければなりませんでした。 競争のタスクはJSでかなり単純なチャートを作成することでしたが、タスクのニュアンスの一部とパフォーマンスに重点を置いて興味深いものにしました。 勝利を主張して何かを作りたいという願望を考えると、フロントエンド開発の世界からの典型的な（そうではない）プロジェクトの通常のしきい値より少し深く潜ることが必要でした。

作業が完了してもうまくいきませんでしたが、今回は無駄ではありませんでした。 主な発見は、SVGで3Dグラフィックスを完全に操作できることでした！ モデルの作成、選択した軸に沿った回転、シナリオに応じたアニメーションなど、すべてがここで利用できます。

最も重要なこと

SVG要素を3Dとして初期化する：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" axisZ="true">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

特定の軸の回転：

 polyLine.rotateX(45); polyLine.rotateY(90);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

シーンの追加とアニメーションの開始：

 polyLine.addAnimScene('rotateX', 45); polyLine.addAnimScene('rotateZ', 60); ... polyLine.runAnimScene(delay);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デモ

https://shtange.github.io/svg-3d/ （ ソース ）