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は開発時にアニメーションのパラメータの調整などに使っていました。
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は開発時にアニメーションのパラメータの調整などに使っていました。