WebGL または Canvas (Flash なし) を使用して、折り紙のような紙折りアニメーションを作成したいと考えています。再現したい効果は、こちらのビデオのようなものです。
立方体の場合、最終的なアニメーションの明確なビューは次のように表すことができます。
three.jsライブラリを使用しようとしましたが、THREE.Mesh の 1 つの面をアニメーション化する方法が見つかりませんでした。簡単な CSS3 アニメーションも試しましたが、2 つ以上の面の間に関係を作成することはできないため、6 つ以上の面を持つソリッドをアニメーション化することは非常に困難です。
誰でも他の JS ライブラリを推奨できますか? または、three.js でこれを達成する方法はありますか? もちろん、canvas2d を使用するだけで機能する方法があれば素晴らしいことですが、可能性は低いと思います。
Mayaを3Dプログラムとして使用する場合は、www.inka3d.comを試してください。次に、上面を前面に、すべての側面を床に（それぞれが平面オブジェクトである）ペアレント化し、いくつかのキーフレームをクレートするだけで、マヤでアニメーション化できます。次に、カメラを追加し、「すべてエクスポート...」を実行すると、完了です。
どのフレームワークが最適かはわかりませんが、スキン メッシュとアニメーション再生をサポートするフレームワークを使用するのが最適だと思います。クイック検索で出た...
……でも、それでいいのかわかりません。3 つはスキニングをサポートしています (または少なくともサポートしていました) が、3D プログラムからデータを取得することは簡単ではなく、アニメーションの再生は制限されていました。
インスピレーションとしてhttp://oridomi.com/をお勧めします。基本的な折りたたみアニメーションを提供します。