#canvas #svg
https://panasonic.jp/shaver/lamdash/dna.html
上記のようなサイトはどうやって作られるのでしょうか。
どんなツールで作られてるのかご教授頂ければ幸いです。
まずはPhotoshopでつくってAnimateCCとかで作ってるのでしょうか。
一緒に読まれている質問
- wpのDB構成ってやばいですよね何でもpostmetaに入れたりとか...何でこんなcmsがシェア1位なんだろ
- 自社は零細のWEB制作会社です。得意先A社(事業会社でWEBの部署あり)のWEB担当者が、今の会社に不満があるらしく、や...
- こんにちは!乾燥地帯と乾燥帯の違いを知っている方は教えて下さいすみません宜しくお願いします(^人^)
- こんにちは!乾燥地帯の地温を知っている方は教えて下さい太陽高度・気温でも良いですすみません宜しくお願いします(^人^)
- #twitter 今更Twitterのフォローリツイートキャンペーンで、バナー内に応募方法なんて記載しますか?ツイート文言に入っているんで...
- 自社は零細のWEB制作会社です。得意先A社(事業会社でWEBの部署あり)のWEB担当者が、今の会社に不満があるらしく、や...
- wpのDB構成ってやばいですよね何でもpostmetaに入れたりとか...何でこんなcmsがシェア1位なんだろ
- particle.jsやvanta jsのような、canvas系の表現をサイトでジェネレートできるサイトって、他におすす...
- #質問 社会人5年目(27)で実家暮らしってやばいんか?金もめっちゃたまるし、実家快適すぎて、一人暮らししたくないんだけどw母さ...
- #質問 面白法人カヤックのこと、業界のみなさんはどう感じてますか?僕はそこで働いてますが、いい評価も悪口もどちらも耳にしています...
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は開発時にアニメーションのパラメータの調整などに使っていました。