-
1:ID:JoouD9 · 2週間前

#canvas #svg https://panasonic.jp/shaver/lamdash/dna.html

上記のようなサイトはどうやって作られるのでしょうか。
どんなツールで作られてるのかご教授頂ければ幸いです。

まずはPhotoshopでつくってAnimateCCとかで作ってるのでしょうか。

9 件の回答

2:ID:HAJ2ln · 2週間前

AIが自動で作ってる

3:ID:jG0X67 · 2週間前

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

4:ID:VYlLxe · 2週間前

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

5:ID:EO0Ftc · 2週間前

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

6:ID: · 2週間前

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

8:ID:n.r3a0 · 1週間前

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

9:ID: · 1週間前

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

10:ID:akcz26 · 1週間前

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

1 件の回答が除外されました。[詳細]
コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る