https://panasonic.jp/shaver/lamdash/dna.html上記のようなサイトはどうやって作られるのでしょうか。どんなツールで作られてるのかご教授頂ければ幸いです。まずはPhotoshopでつくってAnimateCCとかで作ってるのでしょうか。

2:ID:HAJ2ln · 2019-01-01

AIが自動で作ってる

3:ID:jG0X67 · 2019-01-01

ホームページビルダーで検索してみよう！

4:ID:VYlLxe · 2019-01-02

3Dの部分はWebGLという技術を使った3D描画
canvas上に描画されてます
有名なライブラリにthree.jsがあります
でもこのサイトではライブラリは使ってないっぽい

5:ID:EO0Ftc · 2019-01-02

20年前に流行って廃れたFlashを彷彿とさせるデザインですね。なんだか懐かしい。

6:ID:主 · 2019-01-02

Re:4
そうなんですよ、ライブラリ使ってないみたいなんでどうやってるのかなって気になりまして。。

7:ID:CJ1H9q · 削除

8:ID:n.r3a0 · 2019-01-03

GreenSock っての使ってるみたいよ。dat.GUI も読み込んでるけどどこで使ってんのかな…。

9:ID:主 · 2019-01-04

Re:8
GreenSockは有名ですよね。結構使用したりします、それでこれだけできるのはすごいですね～。

10:ID:akcz26 · 2019-01-08

3D部分はThree.jsを使ってます。シェーバー部分と顔は3Dモデルを読み込んでますが、それ以外は板ポリに画像を貼ってエフェクトかけているだけです。エフェクトはshaderを使ってgpu側で処理してます。背景は螺旋状にスプライトのパーティクルを散らしてます。
Domのアニメーションはcssでやってますが、3D 側はjsで計算する必要があり、その部分でGreenSockを使ってます。
ただ、全ての要素に対してアニメーションの計算をさせると処理が重くなるので、0から1に変化するアニメーションの処理をさせて、毎フレーム全ての要素にその係数をかけることでアニメーションさせてます。
dat.GUIは開発時にアニメーションのパラメータの調整などに使っていました。

1いいね!

コメントの受付は終了しました。

9 件の回答

一緒に読まれている質問

#canvas #svg https://panasonic.jp/shaver/lamdash/dna.html上記のようなサイトはどうやって作られるのでしょうか。どんなツールで作られてるのかご教授頂ければ幸いです。まずはPhotoshopでつくってAnimateCCとかで作ってるのでしょうか。

9 件の回答

一緒に読まれている質問