Southern Lifts

メルボルンで約20年、住宅用・商業用のエレベーターを販売・保守しているオーストラリアの会社のサイト。中身は普通のNext.js製コーポレートサイトですが、ヒーローが動画でも画像でもなく、スクロールで進む建築空間のWebGLウォークスルーになっています。 3Dは /models/landing_page1.glb 1ファイル（約4.03MB、Blender書き出し）。中のノード名が構成をそのまま物語っていて、住宅（residential_walls / sofa / table / mezzanine / tv）、カフェ（da_cafe / da_stairs / da_blackboard）、商業（commercial_room / commercial_fridge / commercial_counter）の3つの内装に、shaft_cover と vestner_shaft が加わります。Vestner は実在のドイツのエレベーターメーカーなので、シャフトは実製品をモデル化したものと思われます。 【参考になるポイント】 ・GLBにアニメーションもカメラも1つも入っていない。動きはすべてコード側で、GSAP ScrollTrigger（24箇所）＋ Lenis（18箇所）がカメラをスクラブしている。「静的モデル1つ＋振り付けは全部JS」は、この種のヒーローを安く堅牢に作る定石 ・Three.jsはクリティカルパスから外れている。初期HTMLの14本のscriptにはGSAP/ScrollTrigger/Lenisはあってもthree.jsの記号は1つもなく、WebGLRendererやGLTFLoaderは後続チャンクにだけ現れる ・ローダー構成は GLTFLoader ＋ DRACOLoader ＋ KTX2Loader/Basis。BtoBのリード獲得サイトで4MBのモデルを扱うための、まっとうな圧縮前提のパイプライン ・react-three-fiber の使用はバンドル内の rendererPackageName:"@react-three/fiber" という文字列で確認できる ・※カメラの振り付けやエレベーター扉型のメニューアイコンは、モデルのノード名とAwwwardsの説明からの推測。ページを実行しての確認はしていない