このサイトのアニメーションに使用されているプラグインが何というものなのか、ご教示頂きたいです。
（プラグインを使わず書かれているのかもしれません）
https://moxy.studio/

■試したこと
おそらくWebGLであると思っています。
コンソール画面を確認し、詳しいプラグインが分からなかった（非表示にされている？）こと、
また、「WebGL スクロール」等の語句で検索を試しましたが、求めているものが見つからなかったため、質問させて下さい。

実装したいこと

スクロール↑↓に伴って、3D空間を移動する動き。
（ただ、カメラを動かしているだけなのでしょうか？）

御回答宜しくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

おそらくThree.jsが使われています

このサイトのJSのようなコードはwebpack等でバンドルされていますので、
簡単には中身を見ることができませんが、いくつかコツがあるのでご存知かもしれませんが書いておきます。

コードを展開

デベロッパーツール上でJSファイルを見ると、１行のJS１ファイルにまとめられていますがまずは展開します。

https://developers.google.com/web/tools/chrome-devtools/javascript/pretty-print?hl=ja

これで改行されて見やすくなりますが、変数名や関数名は圧縮され
var c = i[a.id];のようなままです。

圧縮できない文字を探す

生のJSのメソッドやエラーメッセージ等は圧縮されません。
WebGLが使われているかどうかを調べるには

JavaScript
1getContext("webgl")

というメソッドを探します。
（ダブルクォーテーションがシングルクォーテーションになっているかもしれません）

当該のJSを検索してみると、このメソッドが見つかりますので
WebGLが使われている事がわかります。

次に主要なライブラリの文字で検索します。
Three.jsならthree Pixi.jsならpixiという具合です。

当該のJSから

JavaScript
1throw new Error("THREE.Quaternion: .setFromEuler() now expects an Euler rotation rather than a Vector3 and order.");

という文字が見つかりました。
こちらはThree.js内のエラーメッセージなので、このJSがThree.jsごとバンドルされていることがわかります。

ライブラリごとバンドルされていると、ライブラリ固有のメソッド名なども圧縮されてしまい、ここからは中身を読むことはなかなか難しいです。

スクロールに伴って動いている部分は、カメラを動かしているかシーン全体を動かしてるかのどちらかだと思います。

JavaScript
1window.addEventListener("scroll", this.handleScroll, {
2	passive: !0
3}),
4
5~~
6
7o.handleScroll = function(t) {
8	var e = t.direction;
9	o.props.isScrollDisabled || o.props.isChangingStage || ("up" === e ? o.props.decreaseStage() : (o.props.increaseStage(),
10	o.props.currentStage === o.levels.length && Object(L.a)() < I.a.fullHeader && o.props.openMobileMenu()))
11}