three.jsでCSS3DRendererを使用した3Dカード効果

3d Card Effects Using Css3drenderer Three

序文

最近の3Dカードの効果は次のとおりです。

初挑戦

PixiJSでSprite3dを使用して失敗した3Dカードを作成する方法について、私がよく知っているPixiJSを初めて選択しました。 ここを突いて表示します 。

2回目の試行

最初の失敗の経験から、3D効果を達成するためにthree.jsを使用することを決定的に選択します。

しかし、なぜCSS3DRenderer実装を使用することを選択するのか、それはCSS3DRendererとCSSに関連している可能性があります。

CSS3DRendererは直接渡すことができますTHREE.CSS3DObject(DOMElement) Dom要素を3d要素に変換してから、オブジェクトのpositionを制御します。 rotationで属性内x 、y 、zアニメーション効果を実現します。

効果

効果画像は以下の通り、オンラインプレビュー ここを突く 。

実装プロセス

まず、カメラ、シーン、レンダラー、およびコントロールを定義して初期化します。

コアコード

コンポーネントの紹介