Three.jsとベルレ積分によるインタラクティブな3Dランヤードの物理演算設計

ポートフォリオのファーストビューにおいて、訪問者の記憶に残る触感のある演出として、マウスのドラッグやスマホの傾きにリアルタイムで反応する3Dランヤード（社員証・名札）を開発しました。

重い物理シミュレーションライブラリを使わず、わずか数キロバイトのカスタムベルレ積分 (Verlet Integration) アルゴリズムを構築しました。

紐の物理挙動を支えるベルレ法

ストラップを複数の質点として定義し、前フレームとの位置の差分から速度を計算することで、高速かつ安定したシミュレーションを実現しています。

ジャイロセンサーとの連動（重力ベクトルの投影）

スマートフォンの傾き（DeviceOrientation）を検知し、端末を傾けた方向や逆さまにした状態に合わせて重力方向をリアルタイムに計算します。

美しい質感とパフォーマンスの両立

反射光が顔写真の上で不自然な筋にならないよう、PBRマテリアルのクリアコート粗さを緻密に調整し、モバイルでも安定して60FPSを維持しています。