#canvas #svg
https://panasonic.jp/shaver/lamdash/dna.html
上記のようなサイトはどうやって作られるのでしょうか。
どんなツールで作られてるのかご教授頂ければ幸いです。
まずはPhotoshopでつくってAnimateCCとかで作ってるのでしょうか。
一緒に読まれている質問
- WordPressはダメだ、という人に聞きたいです。以下のスレ見ておもったんですが、http://w3q.jp/q/54...
- 30ページくらいの静的サイトをwordpress でフルリニューアルする見積もりを数社で取ったら、50万、200万、30...
- やっと来た新しいiMachttps://www.apple.com/jp/imac/第9世代モデルを買うつもりだけど、み...
- なんか、画面幅によってサイズが流動的に変わるのを何ポッシブルっていうんだっけ？
- #photoshop Photoshopのことで基礎的なことだったら申し訳ない。ガイドにスナップさせて図形を描くんだけど、出来た図形の幅や高さ...
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は開発時にアニメーションのパラメータの調整などに使っていました。