#canvas #svg
https://panasonic.jp/shaver/lamdash/dna.html
上記のようなサイトはどうやって作られるのでしょうか。
どんなツールで作られてるのかご教授頂ければ幸いです。
まずはPhotoshopでつくってAnimateCCとかで作ってるのでしょうか。
一緒に読まれている質問
- W3QはTters内にてサービス継続中です。今後とも当サービスをご愛顧のほど、よろしくお願い申し上げます。
- CSSのpadding-topで画像のアスpeクト比が調整できる仕組みがバカだから全然理解できないままとりあえず使ってる...
- ディスクリプションとかキーワードとかseo的になんの効果もないのに聞きかじった知識披露するクライントって何なんだろうこん...
- 単発の案件で作った Slack のワークスペースって終わったらどうしたらいいん？ 継続して取引のあるクライアントなら残し...
- 一般的にiPhoneユーザーってGoogleアカウント持ってるもんなの？特に20代～30代で。肌感でもいいから教えてくだ...
9 件の回答
AIが自動で作ってる
ホームページビルダーで検索してみよう！
3Dの部分はWebGLという技術を使った3D描画
canvas上に描画されてます
有名なライブラリにthree.jsがあります
でもこのサイトではライブラリは使ってないっぽい
20年前に流行って廃れたFlashを彷彿とさせるデザインですね。なんだか懐かしい。
Re:4
そうなんですよ、ライブラリ使ってないみたいなんでどうやってるのかなって気になりまして。。
GreenSock っての使ってるみたいよ。dat.GUI も読み込んでるけどどこで使ってんのかな…。
Re:8
GreenSockは有名ですよね。結構使用したりします、それでこれだけできるのはすごいですね～。
3D部分はThree.jsを使ってます。シェーバー部分と顔は3Dモデルを読み込んでますが、それ以外は板ポリに画像を貼ってエフェクトかけているだけです。エフェクトはshaderを使ってgpu側で処理してます。背景は螺旋状にスプライトのパーティクルを散らしてます。
Domのアニメーションはcssでやってますが、3D 側はjsで計算する必要があり、その部分でGreenSockを使ってます。
ただ、全ての要素に対してアニメーションの計算をさせると処理が重くなるので、0から1に変化するアニメーションの処理をさせて、毎フレーム全ての要素にその係数をかけることでアニメーションさせてます。
dat.GUIは開発時にアニメーションのパラメータの調整などに使っていました。